[從 0 開始的 Angular 生活]No.27 定義 Angular 元件的輸入介面 - @input()

發表於 | 更新於 | 分類於

前言

承接上一篇文章，目前資料是存放於父元件的，但卻是子元件需要這份資料做輸出，那要如何將父元件的資料傳遞給子元件呢？

@input()

現在專案內發生的問題就是:

  • 兩個子元件 ArticleHeader 與 ArticleBody 的 Template 內有使用到 item 變數
    • 但是 item 變數並沒有被傳進來，它仍然存在於 ArticleList 內

如何把 item 變數傳入這兩個子元件呢？

在子元件的 class 內加入 @input() 裝飾器

如同先前提到的，要將父元件的資料傳遞到子元件，必須透過屬性繫結的方式。

意味著子元件必須要有一個屬性可以承接，於是在這邊宣告屬性 item ，並且不賦予任何值。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-article-header',
  templateUrl: './article-header.component.html',
  styleUrls: ['./article-header.component.scss']
})
export class ArticleHeaderComponent implements OnInit {
  item;
  constructor() { }

  ngOnInit() {
  }

}

但這麼做還不夠，因為目前這個 item 只隸屬於 ArticleHeader 元件，在預設的情況下 item 是無法被父元件透過屬性繫結注入資料的。

還必須加入 @input() 這個 declarator 裝飾器，並且匯入相依模組才可以使用。

而這個步驟同樣也有自動完成可以使用，因此修正後如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
import { Component, OnInit, Input } from '@angular/core';

@Component({
  selector: 'app-article-header',
  templateUrl: './article-header.component.html',
  styleUrls: ['./article-header.component.scss']
})
export class ArticleHeaderComponent implements OnInit {
  @Input()
  item;
  constructor() { }

  ngOnInit() {
  }

}

我們必須也在 ArticleBody 的 class 進行相同的操作，就不贅述了。

而經過上述這些步驟可以發現原本的錯誤已經不見了。

原因是我們已經定義了 item ，但是這樣還不算完成，先看一下目前網頁的狀態。

可以看到目前是沒有資料傳進來的，還需要做一些處理。

透過屬性繫結傳入資料

回到 ArticleList 的 Template 內，並且對兩個子元件加入屬性繫結。

居然有支援自動完成，太神啦！

1
2
3
4
5
6
<!-- Article START-->
<article class="post" id="post{{idx}}" *ngFor="let item of atticleData; let idx = index">
  <app-article-header [item]=item></app-article-header>
  <app-article-body [item]=item></app-article-body>
</article>
<!-- Article END-->

我們就完成了子元件的屬性繫結，中括號 [] 裡面的 item 是剛才在子元件內定義的屬性，而等號後面接的是要傳入的資料也就是區域變數 item 。

來測試看看吧！

至此，我們就完成了一個功能模組的建立，並且這個功能模組內有三個元件，其中父元件為 ArticleList 與它的兩個子元件 ArticleHeader 、 ArticleBody 。

小結

Angular 應用程式的架構，就是把網頁變成一個個大大小小的元件，這是屬於元件化的架構。

在元件化的架構下只要能妥善規劃，在開發、維護、管理層面上複雜度可以大幅地降低。

0%