Angular父組件調(diào)用子組件的方法
理解組件
組件是一種特殊的指令，使用更簡單的配置項(xiàng)來構(gòu)建基于組件的應(yīng)用程序架構(gòu)
這樣他能簡單地寫app，通過類似的web Component 或者angular2的樣式。
web Component 是一個規(guī)范。馬上就要成為標(biāo)準(zhǔn)。
應(yīng)用組件的優(yōu)點(diǎn)：
- 比普通指令配置還簡單
- 提供更好的默認(rèn)設(shè)置和最好的實(shí)踐
- 對基于組建的應(yīng)用架構(gòu)更優(yōu)化。
- 對angular2的升級更平滑。
不用組建的情況:
- 對那些在 compile或者pre-link階段要執(zhí)行操作的指令，組件不能用，因?yàn)闊o法到達(dá)那個階段。
- 如果你想定義指令的 priority，terminal，multi-element，也不能用。
- 組件只能通過元素標(biāo)簽觸發(fā)，其他的只能用命令。
viewChild裝飾器。
父組件的模版和控制器里調(diào)用子組件的API。
1、創(chuàng)建一個子組件child1里面只有一個greeting方法供父組件調(diào)用。
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、父組件中分別在模版中用模版本地變量調(diào)用和在控制器中用ts代碼調(diào)用。
父組件寫2個<app-child>并分別指定模版本地變量
<app-child1 #child1> </app-child1> <app-child1 #child2> </app-child1>
3，在父組件控制器中聲明一個由viewChild裝飾器裝飾的變量獲得子組件的引用。
通過模版變量的名字child1找到相應(yīng)的子組件并賦值給child1變量，拿到引用就可以調(diào)用子組件方法。
@ViewChild('child1')
child1:Child1Component; //父組件中獲得子組件的引用
ngOnInit(){
this.child1.greeting("Tom");
}
4，在父組件模版中調(diào)用子組件方法。
在父組件模版中加一個button，點(diǎn)擊時去調(diào)用子組件child2的greeting方法。
<app-child1 #child1> </app-child1>
<app-child1 #child2> </app-child1>
<button (click)="child2.greeting('Jerry')">調(diào)用child2的greeting方法</button>
總結(jié)
以上所述是小編給大家介紹的Angular父組件調(diào)用子組件的方法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
angular5 子組件監(jiān)聽父組件傳入值的變化方法
今天小編就為大家分享一篇angular5 子組件監(jiān)聽父組件傳入值的變化方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
今天小編就為大家分享一篇angular ng-model 無法獲取值的處理方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-10-10
Angular實(shí)現(xiàn)二級導(dǎo)航欄
這篇文章主要為大家詳細(xì)介紹了Angular實(shí)現(xiàn)二級導(dǎo)航欄，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
angularJs中orderBy篩選以及filter過濾數(shù)據(jù)的方法
今天小編就為大家分享一篇angularJs中orderBy篩選以及filter過濾數(shù)據(jù)的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
詳解Angular中實(shí)現(xiàn)自定義組件的雙向綁定的兩種方法
這篇文章主要介紹了詳解Angular中實(shí)現(xiàn)自定義組件的雙向綁定的兩種方法，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2018-11-11
對angularJs中$sce服務(wù)安全顯示html文本的實(shí)例
今天小編就為大家分享一篇對angularJs中$sce服務(wù)安全顯示html文本的實(shí)例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
Angular ng-repeat指令實(shí)例以及擴(kuò)展部分
這篇文章主要為大家詳細(xì)介紹了Angular ng-repeat指令實(shí)例以及擴(kuò)展部分，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12
angular實(shí)現(xiàn)圖片懶加載實(shí)例代碼
本篇文章主要介紹了angular實(shí)現(xiàn)圖片懶加載實(shí)例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-06-06
AngularJs的UI組件ui-Bootstrap之Tooltip和Popover
這篇文章主要介紹了AngularJs的UI組件ui-Bootstrap之Tooltip和Popover，tooltip和popover是輕量的、可擴(kuò)展的、用于提示的指令。具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-07-07
簡介AngularJS中使用factory和service的方法
這篇文章主要簡單介紹了AngularJS中使用factory和service的方法,主要針對自定義工廠和服務(wù)的創(chuàng)建來講,需要的朋友可以參考下2015-06-06