上層將資料傳到下層

上層帶資料，下層使用@Input()讓上層使用：

  1. 父元件資料 @parent.component.ts
1
2
3
export class Parent {
    dataElements = [{name: 'Test', content: 'from parent'}];
}
  1. 父元件標註 @parent.component.html

抓取dataElements資料，到child element，使用「cElement」的格式

1
2
3
4
<app-child-element
    *ngFor="let dataElement of dataElements"
    [cElement]="dataElement">
</app-child-element>
  1. 子元件設定cElement @child.component.ts

使用@Input()讓上層可以使用下層的物件，括號內(“”)可以寫在上層會怎麼被呼叫。
這裡element所定義的物件，在同層的html檔案中使用

1
2
3
4
5
6
7
8
export class Child implements OnInit {
  @Input('cElement') element: {name: string, content: string};

  constructor() { }

  ngOnInit(): void {
  }
}
  1. 子元件設定 @child.component.html
1
2
<h1>{{ element.name }}</h1>
<p>{{ element.content }}</p>

上層監聽下層事件，下層資料傳到上層

下層使用EventEmitter屬性，當事件發生時，利用emit將事件傳到上層，上層做出回應。

  1. 子元件設定觸發事件 @child.component.html

按鈕點擊觸發onAddElement()

1
<button (click)="onAddElement()></button>
  1. 使用EventEmitter屬性，並設定emit事件 @child.component.ts
1
2
3
4
5
6
7
import { Component, OnInit, EventEmitter, Output } from '@angular/core';

export class ChildComponent implements OnInit {
  @Output() elementCreated = new EventEmitter<eName: string, eContent: string>();
  newEName = '';
  newEContent = '';
}