Angular - 組件傳值

父傳子

• 傳資料

父元件需要先宣告要傳到子元件的變數，

title = "父元件來的";

接著透過html來傳送給子元件，

<app-child [data]="title"></app-child>

使用 Input 宣告要接收父元件的變數

@Input() data: string;

最後在子元件中使用 data 即可。

• 傳事件

父元件需要先宣告要傳到子元件的事件，

sendFromDad(): void {
    alert('這是父元件來的方法');
}

接著透過html來傳送給子元件，

<app-child [functionn]="sendFromDad()"></app-child>

使用 Input 宣告要接收父元件的變數

@Input() functionn: any;

最後在子元件中使用 this.functionn() 即可。

子傳父

需要先在子元件使用 Output 宣告要傳送到父元件的變數，及利用 EventEmitter 輸出屬性

@Output() childToDad: EventEmitter<any> = new EventEmitter();

觸發事件後，會將事件內容傳送出去

send($event): void {
    this.childToDad.emit("從子元件來的");
}

接著透過html來傳送給子元件

<app-child (childToDad)="dadGet($event)"></app-child>

父元件接到後即可執行。

dadGet(msg: string): void {
    console.log(msg);
}