欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Angular父組件調(diào)用子組件的方法

 更新時(shí)間：2018年04月02日 08:21:44   作者：starof  
組件是一種特殊的指令，使用更簡(jiǎn)單的配置項(xiàng)來構(gòu)建基于組件的應(yīng)用程序架構(gòu).這篇文章主要介紹了Angular組件——父組件調(diào)用子組件方法,需要的朋友可以參考下

理解組件

組件是一種特殊的指令，使用更簡(jiǎn)單的配置項(xiàng)來構(gòu)建基于組件的應(yīng)用程序架構(gòu)

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

web Component 是一個(gè)規(guī)范。馬上就要成為標(biāo)準(zhǔn)。

應(yīng)用組件的優(yōu)點(diǎn)：

  • 比普通指令配置還簡(jiǎn)單
  • 提供更好的默認(rèn)設(shè)置和最好的實(shí)踐
  • 對(duì)基于組建的應(yīng)用架構(gòu)更優(yōu)化。
  • 對(duì)angular2的升級(jí)更平滑。

不用組建的情況:

  • 對(duì)那些在 compile或者pre-link階段要執(zhí)行操作的指令，組件不能用，因?yàn)闊o法到達(dá)那個(gè)階段。
  • 如果你想定義指令的  priority，terminal，multi-element，也不能用。
  • 組件只能通過元素標(biāo)簽觸發(fā)，其他的只能用命令。

viewChild裝飾器。

父組件的模版和控制器里調(diào)用子組件的API。

1、創(chuàng)建一個(gè)子組件child1里面只有一個(gè)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個(gè)<app-child>并分別指定模版本地變量

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

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

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

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

4，在父組件模版中調(diào)用子組件方法。

在父組件模版中加一個(gè)button，點(diǎn)擊時(shí)去調(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)用子組件的方法，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

相關(guān)文章

最新評(píng)論