Angular10教程--2.2 父子元件之間傳值

阿新 • • 發佈：2021-01-13

前面，我們介紹了基本的屬性繫結這些基礎，這一節我們將介紹如何使用ng命令生成一個元件，並且還將介紹元件之間的相互屬性傳值。
原文閱讀

ng命令生成元件

在angular中，通過ngCli生成元件其實是一件很簡單的事情。當然，我們直接複製已有的元件，再修改檔名，也是可以的。但是，這樣做不會自動引入我們所建立的新組建。所以，ng命令是我們建立元件的首選。

接下來，我們將在src/app/components/建立一個dialog元件。

/**
 * 語法：
 * ng generate component <name> [options] 

 * ng g c <name> [options] (簡寫)
 * 常用options：
 * --export=true|false         // true,將exports（匯出)這個元件
 * --inlineStyle=true|false    // 樣式是否為內聯形式
 * --inlineTemplate=true|false // 模板檔案(html)是否為內聯形式
 * --skipTests=true|false      // 是否安裝單元測試檔案
 * /
// cd到專案根目錄，執行下面命令:
ng g c components/dialog

執行命令將在src/app

下面自動生成components/dialog資料夾，裡面包含三個檔案：

dialog.component.html
dialog.component.scss
dialog.component.ts

並且，在src/app/app.module.ts中自動引入了dialog元件：

// src/app/app.module.ts
...
import { DialogComponent } from './components/dialog/dialog.component';
@NgModule({
  declarations: [
    AppComponent,
    DialogComponent
  ] 
,
  // ...
})
...

呼叫元件：

// app.component.html
<app-dialog></app-dialog>

就這麼簡單，我們已經建立了第一個自定義元件dialog。

元件傳值

下面我們將通過一個小的例項，來講述元件之間的簡單傳值。

首先，我們拷一段bootstrap的程式碼到dialog.component.html

<div class="modal fade show d-block" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

頁面將是這個樣子：

在這裡插入圖片描述
我們將使用@Input()、@Output()兩個裝飾器來動態設定title、按鈕文字，以及元件通過點選關閉、確定、取消等操作時，向父元件傳遞資訊。

@Input()

定義：一個將類欄位標記為輸入屬性的裝飾器。該屬性繫結到DOM模版，當變更檢測時，Angular 會自動使用這個 DOM 屬性的值來更新此資料屬性。（通常用作父元件向子元件傳值）

建立屬性：

// dialog.component.ts
...
// 引入：（其實，這個一般都不用手動引入，通過編輯器自動引入會更方便）
import { Component, Input, OnInit } from '@angular/core';
export class DialogComponent implements OnInit {
  // 定義所需變數，並初始化預設值
  @Input() show = true; // 通過控制d-block來控制模態框顯示與隱藏
  @Input() title = '標題...';
  @Input() confirmText = '確定';
  @Input() cancelText = '取消';
  // ...
}

元件繫結屬性：

在這裡插入圖片描述
父元件傳入屬性：

// app.component.ts
...
export class AppComponent {
  dialogTile = "這是AppComponent傳入的title";
  dialogShow = false;
}

// app.component.html
...
<app-dialog [title]="dialogTile" [show]="dialogShow" confirmText="OK" ></app-dialog>

頁面也對應發生改變：

在這裡插入圖片描述

@Output()

定義：一個將類欄位標記為輸出屬性的裝飾器。凡是繫結到輸出屬性上的 DOM 屬性，Angular 在變更檢測期間都會自動進行更新。（通常用作子元件向父元件傳值）

按照正常的思路，我們應該先給元件的 DOM 元素繫結一些事件：

在這裡插入圖片描述
事件有了，那麼，父元件怎麼才能知道是哪個事件呢？所以，我們要通過@Output給每個點選事件起個名字(註冊自定義事件)：

// dialog.component.ts
...
// 引入：（其實，這個一般都不用手動引入，通過編輯器自動引入會更方便）
import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
export class DialogComponent implements OnInit {
  // ...
  // 註冊了兩個自定義事件 
  // <void> ==>事件不需要引數
  @Output() closed = new EventEmitter<void>();
  @Output() confirm = new EventEmitter<void>();
  
  onConfirm() {
    this.confirm.emit();
  }
  onClose() {
    this.closed.emit();
  }
  // ...
}

現在，自定義事件有了，要使父元件知道，我們就需要將事件暴露出去，並且在父元件中處理這些事件：

// app.component.html
<button class="btn btn-primary btn-small" (click)="showDialog()">顯示模態框</button>
<app-dialog 
  [title]="dialogTile" 
  [show]="dialogShow"
  confirmText="OK" 
  (closed)="onDialogClosed()"
  (confirm)="onDialogConfirm()"
></app-dialog>

// app.component.ts
...
export class AppComponent {
  // ...
  onDialogClosed() {
    console.log('onDialogClosed');
    this.dialogShow = false;
  }
  onDialogConfirm() {
    console.log('onDialogConfirm');
  }
  showDialog() {
    this.dialogShow = true;
  }
}

頁面檢視效果，可以看出，我們想要的功能實現了：

在這裡插入圖片描述

總結：

1. 生成元件命令ng generate component [options]
2. 父元件向子元件傳值：

子元件：@Input() 變數名 = 預設值
父元件：<app-child [變數名]=“父元件裡的變數”>

3. 子元件向父元件傳值：

子元件：@Output() 自定義事件名 = new EventEmitter();
父元件：<app-child (自定義事件名)=“父元件裡的方法”>

歡迎關注我的公眾號，公眾號將第一時間更新angular教程：
在這裡插入圖片描述