From a85477111f7c42c24e42b0ce88040ebc93618b44 Mon Sep 17 00:00:00 2001 From: stigersmile Date: Wed, 5 May 2021 23:19:45 +0800 Subject: Update /learn/tools_and_testing/client-side_javascript_frameworks/angular_item_component, zh-TW (#723) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * add angular item component tw translation v1 * Update files/zh-tw/learn/tools_and_testing/client-side_javascript_frameworks/angular_item_component/index.html

使用如下的 CLI 指令,在命令行建立一個名為item元件：

Co-authored-by: JB * Apply suggestions from code review merge the review from KarateJB Co-authored-by: JB * add angular item acomponent tw v1.2 * add angular item acomponent tw v1.2 * V1.3 Co-authored-by: JB --- .../angular_item_component/index.html | 97 ++++++++++------------ 1 file changed, 44 insertions(+), 53 deletions(-) (limited to 'files/zh-tw/learn') 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 dae9fe34cb..e079a51eb7 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 @@ -24,41 +24,39 @@ tags:
{{PreviousMenuNext("Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_styling","Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_filtering", "Learn/Tools_and_testing/Client-side_JavaScript_frameworks")}}
-

Components provide a way for you to organize your application. This article walks you through creating a component to handle the individual items in the list, and adding check, edit, and delete functionality. the Angular event model is covered here.

+

元件可以用來幫助你組織你的應用程式。這篇文章會引導你建立一個元件，用來管理清單列表中的個別項目，包含加入核取方塊、編輯和刪除功能。這邊也會介紹 Angular 事件模型。

- - +
預備知識：Familiarity with the core HTML, CSS, and JavaScript languages, knowledge of the terminal/command line. + 熟悉主要的 HTML，CSS 和 JavaScript 語言和terminal/command line知識。
學習目標：To learn more about components, including how events work to handle updates. To add check, edit, and delete functionality. 掌握更多元件知識，包含如何使用事件來處理資料更新，以及加入核取方塊、編輯和刪除的功能。
-

Creating the new component

+

建立一個新的元件

-

At the command line, create a component named item with the following CLI command:

+

使用如下的 CLI 指令,在命令行建立一個名為 item 元件：

ng generate component item
-

The ng generate component command creates a component and folder with the name you specify. -Here, the folder and component name is item. -You can find the item directory within the app folder.

- -

Just as with the AppComponent, the ItemComponent is made up of the following files:

+

指令 ng generate component 創建了以你指定名稱的元件及對應資料夾。這邊的元件和資料夾名稱為 item。你可以在 app 資料夾下找到 item 目錄。

+ +

與 AppComponent 一樣， ItemComponent 是由下列文件組成：

    -
  • item.component.html for HTML
    • -
  • item.component.ts for logic
    • -
  • item.component.css for styles
    • +
  • 用於 HTML 的 item.component.html
    • +
  • 用於邏輯的 item.component.ts
    • +
  • 用於樣式的 item.component.css
-

You can see a reference to the HTML and CSS files in the @Component() decorator metadata in item.component.ts.

+

你可以在 item.component.ts 的 @Component()的裝飾器中找到 HTML 和 CSS 文件的參照位置。

@Component({
   selector: 'app-item',
@@ -66,11 +64,11 @@ You can find the item directory within the app folder.
   styleUrls: ['./item.component.css'],
 })
-

Add HTML for the ItemComponent

+

為 ItemComponent 添加 HTML

-

The ItemComponent can take over the task of giving the user a way to check items off as done, edit them, or delete them.

+

ItemComponent 元件能讓使用者檢查已完成的項目，並對其進行編輯或刪除。

-

Add markup for managing items by replacing the placeholder content in item.component.html with the following:

+

為了增加管理項目的標記，使用下面程式碼替換 item.component.html 中的佔位符內容。

<div class="item">
 
@@ -94,26 +92,27 @@ You can find the item directory within the app folder.
 
 </div>
-

The first input is a checkbox so users can check off items when an item is complete. -The double curly braces, \{{}}, in the <input> and <label> for the checkbox signifies Angular's interpolation. -Angular uses \{{item.description}} to retrieve the description of the current item from the items array. -The next section explains how components share data in detail.

-

The next two buttons for editing and deleting the current item are within a <div>. -On this <div> is an *ngIf, a built-in Angular directive that you can use to dynamically change the structure of the DOM.

+

第一個 input 是一個核取方塊，讓用戶可以在完成該項目後勾選以核對。核取方塊的 <input> 和 <label> 中的雙大括號 \{{}} 表示 Angular 的內嵌繫結。 +Angular使用 \{{item.description}} 從 items 陣列中獲取當前 item 的描述。下一節將詳細解釋元件如何共享數據。

+ +

接下來的用於編輯和刪除當前項目的兩個按鈕位於 <div> 內。 <div> 內的 *ngIf，是內置的 Angular 結構型指令，可動態更改 DOM 的結構。

+ +

*ngIf 表示如果 editable 的值為 false，則此 <div> 會出現在 DOM 中。如果 editable 的值為 true，則 Angular 將從 DOM 中移除該 <div>。

-

This *ngIf means that if editable is false, this <div> is in the DOM. If editable is true, Angular removes this <div> from the DOM.

<div class="btn-wrapper" *ngIf="!editable">
   <button class="btn" (click)="editable = !editable">Edit</button>
   <button class="btn btn-warn" (click)="remove.emit()">Delete</button>
 </div>
-

When a user clicks the Edit button, editable becomes true, which removes this <div> and its children from the DOM. -If, instead of clicking Edit, a user clicks Delete, the ItemComponent raises an event that notifies the AppComponent of the deletion.

-

An *ngIf is also on the next <div>, but is set to an editable value of true. -In this case, if editable is true, Angular puts the <div> and its child <input> and <button> elements in the DOM.

+ +

當用戶點擊 Edit 按鈕時，editable 的值變為 true，這將從 DOM 中移除此 <div> 和它的子元素。如果用戶點擊 Delete 而不是點擊 Edit，則 ItemComponent 將觸發一個刪除事件，用來通知 AppComponent 做刪除動作。

+ + +

在下一個 <div> 裡也放上了 *ngIf，不過它的判斷條件是當 editable 為 true 的情況下，Angular 會將該 <div> 和其子元素 <input> 和 <button>放入 DOM 中。

+ 
<!-- This section shows only if user clicks Edit button -->
 <div *ngIf="editable">
@@ -125,32 +124,26 @@ In this case, if editable is true, Angular puts the 
 
-
With [value]="item.description", the value of the <input> is bound to the description of the current item.
-This binding makes the item's description the value of the <input>.
-So if the description is eat, the description is already in the <input>.
-This way, when the user edits the item, the value of the <input> is already eat.

-
-
The template variable, #editedItem, on the <input> means that Angular stores whatever a user types in this <input> in a variable called editedItem.
-The keyup event calls the saveItem() method and passes in the editedItem value if the user chooses to press enter instead of click Save.

+
設置 [value]="item.description"，<input> 的值將綁定到當前項目的 description 屬性。此綁定使項目的 description 成為<input> 的值。因此如果將 description 設為 eat， 因為 <input> 已經和 description 綁定。所以，當用戶編輯項目時，<input> 的值已被設為 eat。

 
-
When a user clicks the Cancel button, editable toggles to false, which removes the input and buttons for editing from the DOM.
-When editable is false, Angular puts <div> with the Edit and Delete buttons back in the DOM.

+
<input> 上的範本變數 #editedItem 表示 Angular 將用戶在此 <input> 中輸入的內容儲存在名為 editedItem 的變數中。如果用戶在輸入後選擇按 Enter 而不是點擊 Save，則 keyup 事件將調用 saveItem() 方法並傳遞 editedItem 變數的值。

+  
+
當用戶點擊 Cancel 按鈕時，editable 的值將切換為 false，連帶從 DOM 中移除編輯相關的輸入框和按鈕。當 editable 的值為 false 時，Angular 將含有 Edit 和 Delete 按鈕的 <div> 放回 DOM 中。

+  
+
點擊 Save 按鈕將調用 saveItem() 方法。 saveItem()方法從  <input> 中的範本變數 #editedItem 取得值，並將該項目的 description 更改為 editedItem.value 的值。

 
-
Clicking the Save button calls the saveItem() method.
-The saveItem() method takes the value from the #editedItem <input> and changes the item's description to editedItem.value string.

+
準備 AppComponent

 
-
Prepare the AppComponent

-
-
In the next section, you will add code that relies on communication the AppComponent and the ItemComponent.
-Configure the AppComponent first by adding the following to app.component.ts:

+
在下一章節，您將添加用來溝通 AppComponent 和 ItemComponent 的程式碼。首先將以下內容添加到 app.component.ts 中來配置 AppComponent：

 
 
remove(item) {
   this.allItems.splice(this.allItems.indexOf(item), 1);
 }

 
-
The remove() method uses the JavaScript Array.splice() method to remove one item at at the indexOf the relevant item.
-In plain English, this means that the splice() method removes the item from the array.
-For more information on the splice() method, see the MDN Web Docs article on Array.prototype.splice().

+
+
上面 remove() 方法使用了 JavaScript Array.splice() 方法，並透過 indexOf 取得欲刪除項目的陣列索引中位置，以從陣列中刪除該項目。
+簡單來說，splice() 方法從陣列中刪除了該項目。 splice() 的更多訊息請參閱 MDN Web 文章：Array.prototype.splice()。

+  
 
 
Add logic to ItemComponent

 
@@ -253,11 +246,10 @@ The item property in the square brackets, [], binds th
 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.

 
-
Add styles to ItemComponent

+
為 ItemComponent 添加樣式

 
-
You can use a component's style sheet to add styles specific to that component.
-The following CSS adds basic styles, flexbox for the buttons, and custom checkboxes.

-
Paste the following styles into item.component.css.

+
你可以使用元件的 styles sheet 去增加該元件的樣式。下面的 CSS 增加了基本的樣式，對按鈕添加 flexbox 屬性和客製化了核取方塊。

+
將下面的樣式程式碼貼至 item.component.css。

 
 
.item {
   padding: .5rem 0 .75rem 0;
@@ -375,10 +367,9 @@ Adapted from https://css-tricks.com/the-checkbox-hack/#custom-designed-radio-but
   border: 2px dotted blue;
 }

 
-
Summary

+
結論

 
-
You should now have a styled Angular to-do list application that can add, edit, and remove items.
-The next step is to add filtering so that you can look at items that meet specific criteria.

+
您現在應該擁有一個樣式化的Angular待辦事項列表應用程序，該應用程序可以添加，編輯和刪除項目。下一步是加入過濾功能，以便您可以查看符合特定條件的項目。

 
 
{{PreviousMenuNext("Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_styling","Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_filtering", "Learn/Tools_and_testing/Client-side_JavaScript_frameworks")}}

 
-- 
cgit v1.2.3-54-g00ecf