Angular父組件怎么調用子組件

來源：懂視網責編：小采時間：2020-11-27 19:56:18

Angular父組件怎么調用子組件

Angular父組件怎么調用子組件:這次給大家帶來Angular父組件怎么調用子組件，Angular父組件調用子組件的注意事項有哪些，下面就是實戰案例，一起來看一下。理解組件組件是一種特殊的指令，使用更簡單的配置項來構建基于組件的應用程序架構這樣他能簡單地寫app，通過類似的web Comp

推薦度：

點擊下載本文 文檔為doc格式

導讀Angular父組件怎么調用子組件:這次給大家帶來Angular父組件怎么調用子組件，Angular父組件調用子組件的注意事項有哪些，下面就是實戰案例，一起來看一下。理解組件組件是一種特殊的指令，使用更簡單的配置項來構建基于組件的應用程序架構這樣他能簡單地寫app，通過類似的web Comp

這次給大家帶來Angular父組件怎么調用子組件，Angular父組件調用子組件的注意事項有哪些，下面就是實戰案例，一起來看一下。

理解組件

組件是一種特殊的指令，使用更簡單的配置項來構建基于組件的應用程序架構

這樣他能簡單地寫app，通過類似的web Component 或者angular2的樣式。

web Component 是一個規范。馬上就要成為標準。

應用組件的優點：

比普通指令配置還簡單

提供更好的默認設置和最好的實踐

對基于組建的應用架構更優化。

對angular2的升級更平滑。

不用組建的情況:

對那些在 compile或者pre-link階段要執行操作的指令，組件不能用，因為無法到達那個階段。

如果你想定義指令的 priority，terminal，multi-element，也不能用。

組件只能通過元素標簽觸發，其他的只能用命令。

viewChild裝飾器。

父組件的模版和控制器里調用子組件的API。

1、創建一個子組件child1里面只有一個greeting方法供父組件調用。

import { Component, OnInit } from '@angular/core';
@Component({
 selector: 'app-child1',
 templateUrl: './child1.component.html',
 styleUrls: ['./child1.component.css']
})
export class Child1Component implements OnInit {
 constructor() { }
 ngOnInit() {
 }
 greeting(name: string) {
 console.log("hello" + name);
 }
}

2、父組件中分別在模版中用模版本地變量調用和在控制器中用ts代碼調用。

父組件寫2個<app-child>并分別指定模版本地變量

<app-child1 #child1> </app-child1>
<app-child1 #child2> </app-child1>

3，在父組件控制器中聲明一個由viewChild裝飾器裝飾的變量獲得子組件的引用。

通過模版變量的名字child1找到相應的子組件并賦值給child1變量，拿到引用就可以調用子組件方法。

@ViewChild('child1')
child1:Child1Component; //父組件中獲得子組件的引用
ngOnInit(){
 this.child1.greeting("Tom");
}

4，在父組件模版中調用子組件方法。

在父組件模版中加一個button，點擊時去調用子組件child2的greeting方法。

<app-child1 #child1> </app-child1>
<app-child1 #child2> </app-child1>
<button (click)="child2.greeting('Jerry')">調用child2的greeting方法</button>

相信看了本文案例你已經掌握了方法，更多精彩請關注Gxl網其它相關文章！

Angular父組件怎么調用子組件

推薦度：

點擊下載本文 文檔為doc格式

標簽：組件 angular 父組件

熱門焦點

Angular父組件怎么調用子組件

Angular父組件怎么調用子組件

Angular父組件怎么調用子組件

最新推薦

猜你喜歡

熱門推薦