5種Angular中組件通訊的方法介紹-js教程-PHP中文網

5種Angular中組件通訊的方法介紹

元件化是Angular的核心概念，所以元件通訊的使用就比較多而且很重要。

官方傳送門：
##https://angular.io/guide/component-interaction
https://angular.cn/guide/component- interaction
相關教學推薦：《
angular教學》

#父子元件通訊

關鍵字Input Output EventEmitter ViewChild

1、父元件傳遞資料給子元件

【Input】

#綁定屬性的方式

#父元件：

登入後複製

子元件：

// 子元件需要使用Input接收

{{name}}

登入後複製

@Input() public name:string = '';

登入後複製

2、子元件向父元件傳遞資料

【Output EventEmitter】

#子元件：

@Output() public readonly childEmit: EventEmitter = new EventEmitter(); this.childEmit.emit(data);

登入後複製

父元件：

登入後複製

public getData(data:T): void { }

登入後複製

3、ViewChild 方法

因為我覺得這個方法既可以讓父元件取得子元件的數據，又可以讓父元件給子元件設定變數值等，所以我這裡單獨分了出來。

父元件：

登入後複製

@ViewChild('child', { static: true }) public child!: ElementRef; public print():void{ if(this.child){ // 这里得到child，可以使用child中的所有的public属性方法 this.child.print('hello2'); } }

登入後複製

【範例】

// 父组件 import { Component } from '@angular/core'; @Component({ selector: 'app-parent', template: `    ` }) export class ParentComponent { public name:string = '大儿子'; @ViewChild('child', { static: true }) public child!: ElementRef; 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: ` {{name}}
 ` }) export class HeroChildComponent { @Input() public name: string; @Output() public readonly childEmit: EventEmitter = new EventEmitter(); public myClick():void{ this.childEmit.emit(true); } public print(content:string):void{ console.log(content); } }

登入後複製

非父子元件通訊

1、Service

單例模式，其實就是一個變量，需要雙向觸發（發送訊息/ 接收訊息），而設定和取得資料都需要元件自己去處理。

service.ts

import { Component, Injectable, EventEmitter } from '@angular/core'; @Injectable() export class myService { public info: string = ''; }

登入後複製

import { Service1 } from '../../service/service1.service'; ... public constructor( public service: Service1, ) { } public changeInfo():void { this.service.info = this.service.info + '1234'; } ...

登入後複製

import { Service2 } from '../../service/service2.service'; ... public constructor( public service: Service2, ) { } public showInfo() { console.log(this.service.info); } ...

登入後複製

// Service import { BehaviorSubject } from 'rxjs'; ... public messageSource = new BehaviorSubject('Start'); public changeMessage(message: string): void { this.messageSource.next(message); } public getMessageSource(): Observable { return this.messageSource.asObservable(); } ///////////////////////// // 发布 ... this.messageService.changeMessage('message change'); ///////////////////////// public // 订阅 (记得根据需要选择是否取消订阅 unsubscribe) this.messageService.getMessageSource().subscribe(m => { console.log(m); })

登入後複製

AsyncSubject

是。儲存最後一條資料是

以上是5種Angular中組件通訊的方法介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！

相關標籤：

angular

來源：jianshu.com

上一篇：使用原始碼如何編譯安裝nodejs？下一篇：了解Angular中的變化偵測（Change Detection）機制

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

作者最新文章