使用模板引用变量与嵌套组件交互
介绍
大家好！在本指南中，我们将了解模板参考。
组件之间有多种交互方式，例如@Input和@Output。但是如果我们必须在父组件中调用子函数怎么办？
对于这种场景，我们可以在父组件中创建一个新的函数，也可以创建一个具有公共功能的服务文件，并在父子函数中使用它。
今天我们将学习另一种称为模板引用的方法，这样您就可以避免在父组件或不同的服务文件中创建不同的函数。
创建组件
我们需要创建两个组件：一个子组件和一个父组件。为每个文件设置不同的文件夹是一种很好的做法。所以我将在components文件夹中创建所有组件。
ng g c /components/parent --skipTests=true
ng g c /components/child --skipTests=true
在上面的代码片段中，我使用了generate的简称，即g ，以及component的简称，即c。请注意--skipTests=true，尽管我们不打算编写单元测试用例，所以我使用它来跳过测试文件。
我们已经准备好了。让我们深入了解模板参考。
在子组件中创建函数
现在是时候在子组件中创建一个函数了，以便我们可以使用子组件的引用在父组件中调用它。
子组件
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-child',
templateUrl: './child.component.html',
styleUrls: ['./child.component.scss']
})
export class ChildComponent implements OnInit {
constructor() { }
ngOnInit() {
}
hello(){
console.log('hello from child component');
}
}
我创建了一个hello()函数。一旦调用该函数，我们就会在控制台上收到一条消息。
获取子组件的引用
我们已经成功地在子组件中创建了一个函数。现在是时候将子组件放入父组件中了。
父组件.html
<app-child #child></app-child>
注意到我在app-child标签下写了#child。在 Angular 中，要引用任何组件，我们需要将#与字符串放在一起。在我们的例子中，我写了#child，因此我们可以使用它来获取子组件的引用。
@ViewChild 装饰器的使用
@ViewChild ()装饰器是 Angular 中最有用的装饰器之一。它用于获取组件的引用。@ViewChild()的语法是：
@ViewChild('referenceVariable') childVariable:ChildComponent
它接受一个引用变量，在我们的例子中是#child。我们在 child 标签下的父组件中写入了它。childVariable可以是任何东西——它只是一个变量名，我们将使用它来访问子组件的变量或函数。为了确保类型安全，我们应该始终使用冒号 (:) 来编写变量的类型。
ngAfterViewInit() Angular 生命周期钩子的使用
ngAfterViewInit是 Angular 生命周期钩子之一。我们可以在其中使用@ViewChild变量。我们无法在ngOnInit、ngOnChanges或ngDoCheck中访问@ViewChild变量，因为只有在初始化视图后才能访问它。
在父组件中调用子函数
父组件.ts
import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
import { ChildComponent } from '../child/child.component';
@Component({
selector: 'app-parent',
templateUrl: './parent.component.html',
styleUrls: ['./parent.component.scss']
})
export class ParentComponent implements OnInit {
@ViewChild('child') child: ChildComponent;
constructor() { }
ngOnInit() {
}
ngAfterViewInit(){
this.child.hello();
}
}
在上面的代码片段中，我们使用了@ViewChild装饰器来获取子元素的引用。我们使用了我在ngAfterViewInit()中调用的hello()函数作为子元素引用变量，该变量是在子组件中定义的。
输出：
hello from child component
您将在控制台上获得相同的输出。
结论
模板引用是减少代码量的最佳方法之一。它可以节省一行代码，并以最少的时间为您提供相同的结果。如果谈论生产力，代码行数确实很重要。
您可以在此处阅读有关模板参考的更多信息。
免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！
请先 登录后发表评论 ~