From 4a997b94a59b43b9bbcfd3425ae37886f954314d Mon Sep 17 00:00:00 2001 From: Peter Huang Date: Mon, 7 Jun 2021 18:15:40 +0800 Subject: add angular item acomponent Tw --- .../angular_item_component/index.html | 74 ++++++++-------------- 1 file changed, 27 insertions(+), 47 deletions(-) diff --git a/files/zh-tw/learn/tools_and_testing/client-side_javascript_frameworks/angular_item_component/index.html b/files/zh-tw/learn/tools_and_testing/client-side_javascript_frameworks/angular_item_component/index.html index e079a51eb7..f55b214fb7 100644 --- a/files/zh-tw/learn/tools_and_testing/client-side_javascript_frameworks/angular_item_component/index.html +++ b/files/zh-tw/learn/tools_and_testing/client-side_javascript_frameworks/angular_item_component/index.html @@ -145,18 +145,19 @@ Angular使用 \{{item.description}} 從 items 陣列 簡單來說，splice() 方法從陣列中刪除了該項目。 splice() 的更多訊息請參閱 MDN Web 文章：Array.prototype.splice()。

-

Add logic to ItemComponent

+

在 ItemComponent 添加邏輯

-

To use the ItemComponent UI, you must add logic to the component such as functions, and ways for data to go in and out.

+

使用 ItemComponent UI， 你必須在元件中添加邏輯，就跟在 function 中寫輸入與輸出的方式一樣。

-

In item.component.ts, edit the JavaScript imports as follows:

+

在 item.component.ts，引入 JavaScript，如下所示：

import { Component, Input, Output, EventEmitter } from '@angular/core';
 import { Item } from "../item";
-

The addition of Input, Output, and EventEmitter allows ItemComponent to share data with AppComponent. -By importing Item, ItemComponent can understand what an item is.

-

Further down item.component.ts, replace the generated ItemComponent class with the following:

+

加入 Input ， Output,和 EventEmitter 使 ItemComponent 可以與 AppComponent 共享數據， +透過匯入 Item ， 就可以知道在 ItemComponent 的 item 為何。

+ +

繼續看 item.component.ts ，把生成的 ItemComponent 替換成以下內容：

export class ItemComponent {
 
@@ -173,37 +174,28 @@ By importing Item, ItemComponent can understand what a
   }
 }
-

The editable property helps toggle a section of the template where a user can edit an item. -editable is the same property in the HTML as in the *ngIf statement, *ngIf="editable". -When you use a property in the template, you must also declare it in the class.

+

editable 屬性有助於切換模板，讓使用者可以編輯其項目。HTML中的 editable 屬性與 *ngIf 語句中的屬性相同， *ngIf="editable"。當你在模板使用此屬性時，你也必須在class中宣告它。

-

@Input(), @Output(), and EventEmitter facilitate communication between your two components. -An @Input() serves as a doorway for data to come into the component, and an @Output() acts as a doorway for data to go out of the component. -An @Output() has to be of type EventEmitter, so that a component can raise an event when there's data ready to share with another component.

+

@Input() ， @Output() 和 EventEmitter 促進兩個元件中的溝通，一個 @Output() 服務元件做為資料傳進的入口，然後一個 @Output() 是將元件資料傳到外層。@Output() 必須是 EventEmitter 的類型，資料可以透過事件分享至其他組件。

-

Use @Input() to specify that the value of a property can come from outside of the component. -Use @Output() in conjunction with EventEmitter to specify that the value of a property can leave the component so that another component can receive that data.

+

使用 @Input()指定外部元件要傳進之屬性的值，將 @Output() 與 EventEmitter 結合使用可將該元件指定屬性的值傳出，使得另一個元件可以接收其資料。

-

The saveItem() method takes as an argument a description. -The description is the text that the user enters into the HTML <input> when editing an item in the list. -This description is the same string from the <input> with the #editedItem template variable.

+

saveItem() 方法是在 description 取得一個引數，此description 為使用者輸入 HTML 的 <input> 標籤編輯清單的項目時的文字， +此 description 與 <input> 中帶有 #editedItem 範本變數的字符串相同。

-

If the user doesn't enter a value but clicks Save, saveItem() returns nothing and does not update the description. -If you didn't have this if statement, the user could click Save with nothing in the HTML <input>, and the description would become an empty string.

+

如果使用者沒有輸入任何的值但點擊 Save 時，saveItem() 不會回傳任何東西與更新 description。如果你沒有用 if ，使用者就可以在 HTML 的 <input> 沒有值的時候點擊 Save，並且 description 會是空字串。

-

If a user enters text and clicks save, saveItem() sets editable to false, which causes the *ngIf in the template to remove the edit feature and render the Edit and Delete buttons again.

+

如果使用者輸入文字並點擊儲存， saveItem() 會設定 editable 是 false，這會導致模板中的*ngIf 移除編輯功能並重新渲染 Edit 跟 Delete 的按鈕

-

Though the application should compile at this point, you need to use the ItemComponent in AppComponent so you can see the new features in the browser.

+

儘管程式現在可以編譯，你必須在 AppComponent 中使用 ItemComponent 才能在瀏覽器看到新功能。

-

Use the ItemComponent in the AppComponent

+

在 AppComponent 中使用 ItemComponent

-

Including one component within another in the context of a parent-child relationship gives you the flexibility of using components wherever you need them.

+

在父子關係的情境下，可將一個組件包含在另一個組件中，讓您靈活地使用它們。

-

The AppComponent serves as a shell for the application where you can include other components.

+

AppComponent 就像個應用程式的外殼，可在內部加入其他元件

-

To use the ItemComponent in AppComponent, put the ItemComponent selector in the AppComponent template. -Angular specifies the selector of a component in the metadata of the @Component() decorator. -In this example, the selector is app-item:

+

要在 AppComponent 中使用 ItemComponent，需將 ItemComponent 選擇器放到 AppComponent 中。Angular 在元件共享數據的元件中使用 @Component() 裝飾器，此選擇器為 app-item:

@Component({
   selector: 'app-item',
@@ -211,8 +203,7 @@ In this example, the selector is app-item:

   styleUrls: ['./item.component.css']
 })
-

To use the ItemComponent selector within the AppComponent, you add the element, <app-item>, which corresponds to the selector you defined for the component class to app.component.html. -Replace the current unordered list in app.component.html with the following updated version:

+

要在 AppComponent 中使用 ItemComponent 選擇器時，你要增加元素 <app-item>，它對應你在 app.component.html 中對元件類別定義的選擇器。用以下更新的版本替換在 app.component.html 中未排序清單:

<h2>\{{items.length}} <span *ngIf="items.length === 1; else elseBlock">item</span>
 <ng-template #elseBlock>items</ng-template></h2>
@@ -223,28 +214,17 @@ Replace the current unordered list in app.component.html with the f
   </li>
 </ul>
-

The double curly brace syntax, \{{}}, in the <h2> interpolates the length of the items array and displays the number.

+

雙括號 \{{}}，在 <h2> 內顯示 items 的長度與數目。

-

The <span> in the <h2> uses an *ngIf and else to determine whether the <h2> should say "item" or "items". -If there is only a single item in the list, the <span> containing "item" displays. -Otherwise, if the length of the items array is anything other than 1, the <ng-template>, which we've named elseBlock, with the syntax #elseBlock, shows instead of the <span>. -You can use Angular's <ng-template> when you don't want content to render by default. -In this case, when the length of the items array is not 1, the *ngIf shows the elseBlock and not the <span>.

+

在 <h2> 中 <span> 使用 *ngIf 與 else 決定 <h2> 是否要呈現 "item" 或 "items"。如果在列表中只有一個項目， 則 會顯示包含 <span> 的內容。當items 陣列不等於 1 時，被我們命名為 elseBlock 的 <ng-template>，將顯示 #elseBlock，而不是 <span>。當您不想內容在預設渲染的時候，可以使用 Angular 的 <ng-template> ，因 #elseBlock 不是 <span>，是使用 <ng-template>。在此範例中，若 item 陣列長度不是 1 ，則 *ngIf 會顯示 elseBlock 而不顯示 <span>。 -

The <li> uses Angular's repeater directive, *ngFor, to iterate over all of the items in the items array. -Angular's *ngFor like *ngIf, is another directive that helps you change the structure of the DOM while writing less code. -For each item, Angular repeats the <li> and everything within it, which includes <app-item>. -This means that for each item in the array, Angular creates another instance of <app-item>. -For any number of items in the array, Angular would create that many <li> elements.

+

在 <li> 使用 Angular 的結構型指令 *ngFor 會在 items陣列迭代所有的項目，Angular 的 *ngFor 與 *ngIf 指令相似，是另一個可以協助你用更少的程式碼改變 DOM 元素架構，每一個 item，Angular 會重複 <li> 與其所有的內容，其中包含 <app-item>。這代表 Angular 為陣列中的每一個項目建立另一個 <app-item> 實體。Angular 會建立與 items 陣列中的數量相同的項目的 <li> 元素。

-

You can use an *ngFor on other elements, too, such as <div>, <span>, or <p>, to name a few.

+

您可使用 *ngFor 在其他的元素上，像是在 <div>、<span> 或是 <p>，以此類推。

-

The AppComponent has a remove() method for removing the item, which is bound to the remove property in the ItemComponent. -The item property in the square brackets, [], binds the value of item between the AppComponent and the ItemComponent.

+

在 AppComponent 有一個移除項目的 remove() 的方法，是綁定 ItemComponent 中 remove 的屬性，此 item 屬性是在中括號內 [],用來綁定 item 在 AppComponent 與 ItemComponent 之間的值。

-

Now you should be able to edit and delete items from the list. -When you add or delete items, the count of the items should also change. -To make the list more user-friendly, add some styles to the ItemComponent.

+

現在你應該知道如何編輯和刪除在列表中的項目。當你新增或刪除項目時，項目的數量也會更動，為了使列表更易於使用，請在 ItemComponent 中新增些樣式。

為 ItemComponent 添加樣式

@@ -434,4 +414,4 @@ Adapted from https://css-tricks.com/the-checkbox-hack/#custom-designed-radio-but
  • Building Angular applications and further resources
    • - + \ No newline at end of file -- cgit v1.2.3-54-g00ecf