Angular组件——父组件调用子组件方法
<p>viewChild装饰器。</p><p>父组件的模版和控制器里调用子组件的API。</p>
<p>1、创建一个子组件child1里面只有一个greeting方法供父组件调用。</p>
<div class="cnblogs_code"><img src="https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif" alt="" id="code_img_opened_44a17afe-914c-48df-8c12-088955b3d92e" class="code_img_opened">
<div id="cnblogs_code_open_44a17afe-914c-48df-8c12-088955b3d92e" class="cnblogs_code_hide" data-filtered="filtered">
<div class="cnblogs_code_toolbar"><span class="cnblogs_code_copy"><img src="https://common.cnblogs.com/images/copycode.gif" alt="复制代码"></span></div>
<pre data-filtered="filtered">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);
}
}</pre>
<div class="cnblogs_code_toolbar"><span class="cnblogs_code_copy"><img src="https://common.cnblogs.com/images/copycode.gif" alt="复制代码"></span></div>
</div>
</div>
<p>2、父组件中分别在<strong>模版中用模版本地变量调用</strong>和<strong>在控制器中用ts代码</strong>调用。</p>
<p>父组件写2个<app-child>并分别指定模版本地变量</p>
<div class="cnblogs_code">
<pre><app-child1 #child1> </app-child1>
<app-child1 #child2> </app-child1></pre>
</div>
<p>3，在父组件控制器中声明一个由viewChild装饰器装饰的变量获得子组件的引用。</p>
<p>通过模版变量的名字child1找到相应的子组件并赋值给child1变量，拿到引用就可以调用子组件方法。</p>
<div class="cnblogs_code">
<pre>@ViewChild('child1')
child1:Child1Component; //父组件中获得子组件的引用
ngOnInit(){
this.child1.greeting("Tom");
}</pre>
</div>
<p><img src="https://img2020.cnblogs.com/blog/48590/202008/48590-20200812154738621-914443522.png" alt="" loading="lazy"></p>
<p> </p>
<p> </p>
<p>4，在父组件模版中调用子组件方法。</p>
<p>在父组件模版中加一个button，点击时去调用子组件child2的greeting方法。</p>
<div class="cnblogs_code">
<pre><app-child1 #child1> </app-child1>
<app-child1 #child2> </app-child1>
<button (click)="child2.greeting('Jerry')">调用child2的greeting方法</button></pre>
</div>
<p><img src="https://img2020.cnblogs.com/blog/48590/202008/48590-20200812154757114-1321495389.png" alt="" loading="lazy"></p>
<p> </p><br><br>
来源：https://www.cnblogs.com/telwanggs/p/13490970.html
頁:
[1]