Angular元件怎麼進行通訊？父子組件通訊的2種方法

本篇文章帶大家了解一下Angular中的元件通信，介紹一下父子元件間通信、無直接關係元件間通信的方法。

在實際的應用中我們的元件將會以樹狀的結構進行關聯,所以元件間的關係主要是:

• 父子關係

• 兄弟關係

• #無直接關係

【相關教學推薦：《angular教學》】

準備一下我們的環境:

1、建立一個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、建立一個title元件: ng g c components/title

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

export class TitleComponent implements OnInit {

  public title: string = '标题';

  constructor() {}

  ngOnInit(): void {}
}

3、建立一個button元件: ng g c components/button

<button>{{ btnName }}</button>

export class ButtonComponent implements OnInit {
  public btnName: string = '按钮';

  constructor() {}

  ngOnInit(): void {}
}

#直接呼叫

適用於父子關係​​元件,注意點是直接呼叫使得父子元件的耦合性變高,要明確使用確實需要直接呼叫。

1、將我們的header元件掛載到app中,使得app和header之間形成父子元件關係

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

3、現在我們的header元件還很空,我們擴充一下,要不然呼叫什麼呢?

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

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

4、元件擴充好以後我們就可以在父元件app中呼叫子元件header中的屬性和函數了

<app-header #header></app-header>
<p>
  调用子组件属性: {{ header.name }}
  <button (click)="header.printName()">调用子组件函数</button>
</p>

5、第4步是在父組件的html模板中進行操作,有時候我們還需要在父組件的ts類中對子組件進行操作,我們接下來接著演示。

6、我們需要用到一個新的裝飾器@ViewChild(Component)

export class AppComponent {
  title = 'angular-course';

  @ViewChild(HeaderComponent)
  private header!: HeaderComponent;

	// 声明周期钩子: 组件及子组件视图更新后调用,执行一次
  ngAfterViewInit(): void {
    // 调用子组件属性
    console.log(this.header.name);
    // 调用子组件函数
    this.header.printName();
  }
}

@Input和@Output

#適用於父子關係​​元件

1、我們透過在header元件中定義title,來解耦title元件中直接呼叫導致擴展複雜的問題

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

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

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

5、一起看看到現在的效果吧,界面雖然醜,但是下次使用組件時title設定是不是方便一點呢?

#6、以上步驟實作了父元件的資料傳遞到了子元件中,那麼我們接著來看子元件的資料怎麼傳遞到父元件呢? 我們一起來用@Output()裝飾器實作以下吧

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

8、在title元件的ts類別中定時派發資料

ngOnInit(): void {
  // 定时将子组件的数据进行派发
  setInterval(() => {
  	this.titleChange.emit(this.title);
	}, 1500);
}

9、現在我們來修改header父元件來接收派發來的資料:

<app-title 
	[title]="title" 
  (titleChange)="onChildTitleChange($event)">
</app-title>

onChildTitleChange(value: any) {
	console.log('onChildTitleChange: >>', value);
}

利用服務單利進行通訊

適用於無直接關聯元件

#1、既然要透過服務來做通訊,那我們就先建立一個服務吧: ng g s services/EventBus,並且我們聲明了一個類型為Subject的屬性來輔助通信

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

  constructor() {}
}

2、我們為了省事就不重新建立元件了,因為我們的header中的按鈕元件和title元件就符合沒有直接關係的元件。

3、改造一下我們的button元件,並且加入點擊事件觸發triggerEventBus函數

export class ButtonComponent implements OnInit {
  public btnName: string = '按钮';

  constructor(public eventBusService: EventBusService) {}

  ngOnInit(): void {}

  public triggerEventBus(): void {
    this.eventBusService.eventBus.next('我是按钮组件');
  }
}

4、在title元件中模擬資料的取得

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元件中儲存資料,在 button元件中取得資料。我們只示範localstorage吧,其他都雷同的。

2、在title元件的ngOnInit()鉤子中儲存title到localstorage中: window.localStorage.setItem('title', this.title);

3、在button元件中取得資料: const title = window.localStorage.getItem('title');

結語：

本篇我們介紹了Angular的元件通信，為我們拆分後的元件可以進行合理的通訊提供了保障，我們到現在組件的使用都是透過引入標籤的方式進行。

原文網址：https://juejin.cn/post/6991471300837572638

作者：小鑫同學

更多程式設計相關知識，請訪問：程式設計入門！ ！

以上是Angular元件怎麼進行通訊？父子組件通訊的2種方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！