小編給大家分享一下Angular組件如何進(jìn)行通信,相信大部分人都還不怎么了解,因此分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后大有收獲,下面讓我們一起去了解一下吧!
網(wǎng)站建設(shè)哪家好,找創(chuàng)新互聯(lián)建站!專注于網(wǎng)頁設(shè)計(jì)、網(wǎng)站建設(shè)、微信開發(fā)、成都小程序開發(fā)、集團(tuán)企業(yè)網(wǎng)站建設(shè)等服務(wù)項(xiàng)目。為回饋新老客戶創(chuàng)新互聯(lián)還提供了扶風(fēng)免費(fèi)建站歡迎大家使用!
準(zhǔn)備一下我們的環(huán)境:
1、創(chuàng)建一個(gè)header
組件: ng g c components/header
<app-button></app-button> <app-title></app-title> <app-button></app-button>
export class HeaderComponent implements OnInit { constructor() {} ngOnInit(): void {} }
2、創(chuàng)建一個(gè)title
組件: ng g c components/title
<span>{{title}}</span>
export class TitleComponent implements OnInit { public title: string = '標(biāo)題'; constructor() {} ngOnInit(): void {} }
3、創(chuàng)建一個(gè)button
組件: ng g c components/button
<button>{{ btnName }}</button>
export class ButtonComponent implements OnInit { public btnName: string = '按鈕'; constructor() {} ngOnInit(): void {} }
直接調(diào)用
適用于父子關(guān)系組件,注意點(diǎn)是直接調(diào)用使得父子組件的耦合性變高,要明確使用確實(shí)需要直接調(diào)用。
1、將我們的header組件掛載到app中,使得app和header之間形成父子組件關(guān)系
2、使用#
為我們的組件起一個(gè)名稱: <app-header #header></app-header>
3、現(xiàn)在我們的header組件還很空,我們擴(kuò)展一下,要不然調(diào)用什么呢?
export class HeaderComponent implements OnInit { public name: string = 'HeaderComponent'; printName(): void { console.log('component name is', this.name); } }
4、組件擴(kuò)展好以后我們就可以在父組件app中調(diào)用子組件header中的屬性和函數(shù)了
<app-header #header></app-header> <p> 調(diào)用子組件屬性: {{ header.name }} <button (click)="header.printName()">調(diào)用子組件函數(shù)</button> </p>
5、第4步是在父組件的html模板中進(jìn)行操作,有時(shí)候我們還需要在父組件的ts類中對(duì)子組件進(jìn)行操作,我們接下來接著演示。
6、我們需要用到一個(gè)新的裝飾器@ViewChild(Component)
export class AppComponent { title = 'angular-course'; @ViewChild(HeaderComponent) private header!: HeaderComponent; // 聲明周期鉤子: 組件及子組件視圖更新后調(diào)用,執(zhí)行一次 ngAfterViewInit(): void { // 調(diào)用子組件屬性 console.log(this.header.name); // 調(diào)用子組件函數(shù) this.header.printName(); } }
@Input和@Output
適用于父子關(guān)系組件
1、我們通過在header
組件中定義title
,來解耦title
組件中直接調(diào)用導(dǎo)致擴(kuò)展復(fù)雜的問題
2、為title
組件中的title
屬性增加@Input()裝飾器: @Input() public title: string = '標(biāo)題';
3、為header組件新增title屬性并賦值: public title: string = '我是新標(biāo)題';
4、我們?cè)?code>header組件的html
模板中這樣來使用title
組件: <app-title [title]="title"></app-title>
5、一起看看到現(xiàn)在的效果吧,界面雖然丑,但是下次使用組件時(shí)title
設(shè)置是不是方便一點(diǎn)呢?
6、以上步驟實(shí)現(xiàn)了父組件的數(shù)據(jù)傳遞到了子組件中,那么我們接著來看子組件的數(shù)據(jù)怎么傳遞到父組件中呢? 我們一起來用@Output()
裝飾器實(shí)現(xiàn)以下吧
7、在title
組件的ts類中增加titleChange
屬性: @Output() public titleChange = new EventEmitter();
8、在title
組件的ts類中定時(shí)派發(fā)數(shù)據(jù)
ngOnInit(): void { // 定時(shí)將子組件的數(shù)據(jù)進(jìn)行派發(fā) setInterval(() => { this.titleChange.emit(this.title); }, 1500); }
9、現(xiàn)在我們來修改header父組件來接收派發(fā)來的數(shù)據(jù):
<app-title [title]="title" (titleChange)="onChildTitleChange($event)"> </app-title>
onChildTitleChange(value: any) { console.log('onChildTitleChange: >>', value); }
利用服務(wù)單利進(jìn)行通信
適用于無直接關(guān)系組件
1、既然要通過服務(wù)來做通信,那我們就先創(chuàng)建一個(gè)服務(wù)吧: ng g s services/EventBus
,并且我們聲明了一個(gè)類型為Subject
的屬性來輔助通信
@Injectable({ providedIn: 'root', }) export class EventBusService { public eventBus: Subject<any> = new Subject(); constructor() {} }
2、我們?yōu)榱耸∈戮筒恢匦聞?chuàng)建組件了,因?yàn)槲覀兊?code>header中的按鈕組件和title組件就符合沒有直接關(guān)系的組件。
3、改造一下我們的button
組件,并且添加點(diǎn)擊事件來觸發(fā)triggerEventBus
函數(shù)
export class ButtonComponent implements OnInit { public btnName: string = '按鈕'; constructor(public eventBusService: EventBusService) {} ngOnInit(): void {} public triggerEventBus(): void { this.eventBusService.eventBus.next('我是按鈕組件'); } }
4、在title
組件中模擬數(shù)據(jù)的獲取
export class TitleComponent implements OnInit { constructor(public eventBusService: EventBusService) {} ngOnInit(): void { this.eventBusService.eventBus.subscribe((value) => { console.log(value); }); } }
利用cookie、session或者localstorage進(jìn)行通信
1、這個(gè)就很簡(jiǎn)單了,我們還是用title
組件和button
組件來做演示,這次我們?cè)趖itle組件中將數(shù)據(jù)保存,在button
組件中獲取數(shù)據(jù)。我們僅演示localstorage
吧,其他都雷同的。
2、在title
組件的ngOnInit()
鉤子中保存title
到localstorage
中: window.localStorage.setItem('title', this.title);
3、在button組件中獲取數(shù)據(jù): const title = window.localStorage.getItem('title');
以上是“Angular組件如何進(jìn)行通信”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對(duì)大家有所幫助,如果還想學(xué)習(xí)更多知識(shí),歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道!
分享名稱:Angular組件如何進(jìn)行通信
本文鏈接:http://bm7419.com/article30/igejpo.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供標(biāo)簽優(yōu)化、電子商務(wù)、網(wǎng)站改版、網(wǎng)站內(nèi)鏈、外貿(mào)建站、面包屑導(dǎo)航
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)