元件化是Angular的核心概念,所以元件通訊的使用就比較多而且很重要。
#父子元件通訊官方傳送門:
##https://angular.io/guide/component-interaction https://angular.cn/guide/component- interaction相關教學推薦:《angular教學》
關鍵字 Input Output EventEmitter ViewChild
1、父元件傳遞資料給子元件【Input】#綁定屬性的方式
#父元件:
<!-- parentComponent -->
<app-child [name]="'childName'"></app-child>
// 子元件需要使用Input接收
<span>{{name}}</span>
@Input() public name:string = '';
2、子元件向父元件傳遞資料【Output EventEmitter】
#子元件:
@Output() public readonly childEmit: EventEmitter<T> = new EventEmitter<T>(); this.childEmit.emit(data);
父元件:
<app-child (childEmit)="getData($event)"></app-child>
public getData(data:T): void { }
因為我覺得這個方法既可以讓父元件取得子元件的數據,又可以讓父元件給子元件設定變數值等,所以我這裡單獨分了出來。
父元件:
<app-child **#child**></app-child> <button (click)="**child**.print('---')">点击</button>
@ViewChild('child', { static: true }) public child!: ElementRef<HTMLElement>; public print():void{ if(this.child){ // 这里得到child,可以使用child中的所有的public属性方法 this.child.print('hello2'); } }
【範例】
// 父组件 import { Component } from '@angular/core'; @Component({ selector: 'app-parent', template: ` <app-child #child [name]="name" (childEmit)="childClick($event)"></app-child> <button (click)="child.print('hello1')">调用子组件的方法1</button> <button (click)="print()">调用子组件的方法2</button> ` }) export class ParentComponent { public name:string = '大儿子'; @ViewChild('child', { static: true }) public child!: ElementRef<HTMLElement>; public childClick(bool:Boolean):void{ // TODO } public print():void{ if(this.child){ this.child.print('hello2'); } } } /*****************************************************/ // 子组件 import { Component, Input, Output, EventEmitter } from '@angular/core'; @Component({ selector: 'app-child', template: ` <h3 (click)="myClick()">{{name}}</h3> ` }) export class HeroChildComponent { @Input() public name: string; @Output() public readonly childEmit: EventEmitter<boolean> = new EventEmitter<boolean>(); public myClick():void{ this.childEmit.emit(true); } public print(content:string):void{ console.log(content); } }非父子元件通訊
1、Service單例模式,其實就是一個變量,需要雙向觸發(發送訊息/ 接收訊息),而設定和取得資料都需要元件自己去處理。 service.ts
元件2 從service 取得資訊 | 2、Subject(發布訂閱) | 真正的發布訂閱模式,當資料改變時,訂閱者也能得到回應,這裡只舉了BehaviorSubject的例子 | |
---|---|---|---|
rxjs subject | 是否儲存資料 | 是否需要初始值 | 何時向訂閱者發布資料 |
Subject | ##否 | ||
BehaviorSubject | 是。儲存最後一條資料或初始值 | 是 | |
ReplaySubject | 是。儲存所有資料 | 否 |
AsyncSubject
延時發布。只有當資料來源complete的時候才會發布###############其他通訊方式######路由傳值、瀏覽器本地儲存(LocalStorage,SessionStorage)、cookie。 ######更多程式相關知識,可存取:###程式設計入門###! ! ######以上是5種Angular中組件通訊的方法介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章!