Angular組件如何進行通信

小編給大家分享一下Angular組件如何進行通信，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

網(wǎng)站建設(shè)哪家好，找創(chuàng)新互聯(lián)建站！專注于網(wǎng)頁設(shè)計、網(wǎng)站建設(shè)、微信開發(fā)、成都小程序開發(fā)、集團企業(yè)網(wǎng)站建設(shè)等服務(wù)項目。為回饋新老客戶創(chuàng)新互聯(lián)還提供了扶風(fēng)免費建站歡迎大家使用！

準備一下我們的環(huán)境:

1、創(chuàng)建一個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)建一個title組件: ng g c components/title

<span>{{title}}</span>

export class TitleComponent implements OnInit {

  public title: string = '標題';

  constructor() {}

  ngOnInit(): void {}
}

3、創(chuàng)建一個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ào)用使得父子組件的耦合性變高,要明確使用確實需要直接調(diào)用。

1、將我們的header組件掛載到app中,使得app和header之間形成父子組件關(guān)系

2、使用#為我們的組件起一個名稱: <app-header #header></app-header>

3、現(xiàn)在我們的header組件還很空,我們擴展一下,要不然調(diào)用什么呢?

export class HeaderComponent implements OnInit {
  public name: string = 'HeaderComponent';

  printName(): void {
    console.log('component name is', this.name);
  }
}

4、組件擴展好以后我們就可以在父組件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模板中進行操作,有時候我們還需要在父組件的ts類中對子組件進行操作,我們接下來接著演示。

6、我們需要用到一個新的裝飾器@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)致擴展復(fù)雜的問題

2、為title組件中的title屬性增加@Input()裝飾器: @Input() public title: string = '標題';

3、為header組件新增title屬性并賦值: public title: string = '我是新標題';

4、我們再header組件的html模板中這樣來使用title組件: <app-title [title]="title"></app-title>

5、一起看看到現(xiàn)在的效果吧,界面雖然丑,但是下次使用組件時title設(shè)置是不是方便一點呢?

6、以上步驟實現(xiàn)了父組件的數(shù)據(jù)傳遞到了子組件中,那么我們接著來看子組件的數(shù)據(jù)怎么傳遞到父組件中呢? 我們一起來用@Output()裝飾器實現(xiàn)以下吧

7、在title組件的ts類中增加titleChange屬性: @Output() public titleChange = new EventEmitter();

8、在title組件的ts類中定時派發(fā)數(shù)據(jù)

ngOnInit(): void {
  // 定時將子組件的數(shù)據(jù)進行派發(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ù)單利進行通信

適用于無直接關(guān)系組件

1、既然要通過服務(wù)來做通信,那我們就先創(chuàng)建一個服務(wù)吧: ng g s services/EventBus,并且我們聲明了一個類型為Subject的屬性來輔助通信

@Injectable({
  providedIn: 'root',
})
export class EventBusService {
  public eventBus: Subject<any> = new Subject();

  constructor() {}
}

2、我們?yōu)榱耸∈戮筒恢匦聞?chuàng)建組件了,因為我們的header中的按鈕組件和title組件就符合沒有直接關(guān)系的組件。

3、改造一下我們的button組件,并且添加點擊事件來觸發(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進行通信

1、這個就很簡單了,我們還是用title組件和button組件來做演示,這次我們在title組件中將數(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組件如何進行通信”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

分享名稱：Angular組件如何進行通信
本文鏈接：http://muchs.cn/article30/igejpo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供標簽優(yōu)化、電子商務(wù)、網(wǎng)站改版、網(wǎng)站內(nèi)鏈、外貿(mào)建站、面包屑導(dǎo)航

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)