angular @viewChild 在子父组件之间传递数据和方法

最新推荐文章于 2024-08-20 17:11:07 发布

努力不脱发选手

最新推荐文章于 2024-08-20 17:11:07 发布

阅读量1.1k

点赞数

分类专栏： angular 文章标签： typescript angular

本文链接：https://blog.csdn.net/weixin_41147129/article/details/105581454

版权

本文介绍了Angular中的@ViewChild装饰器，用于从模板视图中获取匹配的元素，包括组件、指令和管道。@ViewChild允许在父组件中引用子组件实例，可以在ngAfterViewInit()回调后使用。实操部分详细讲解了通过子组件实例引用和使用字符串选择器两种方式来实现子父组件间的数据和方法传递。

摘要由CSDN通过智能技术生成

简介

@ViewChild和@ViewChildren是Angular提供给我们的装饰器，用于从模板视图中获取匹配的元素。
视图包括：管道，指令和组件。
@ViewChild的作用是声明对子组件元素的实例引用，意思是通过注入的方式将子组件注入到@ViewChild容器中，你可以想象成依赖注入的方式注入，只不过@ViewChild不能在构造器constructor中注入，因为@ViewChild会在ngAfterViewInit()回调函数之前执行

实操

@VIewChild提供了一个参数来选择将要引入的组件元素，可以是一个子组件实例引用，也可以是一个字符串

//parent.component.ts
  @ViewChild(ChildTestComponent)
  childTest : ChildTestComponent; //子组件实例化

  @ViewChild('child2') Child2; //字符串

一：传入子组件实例

子组件

// child-test.component.ts
import {
    Component, OnInit } from '@angular/core';
@Component({
   
  selector: 'app-child-test',
  templateUrl: './child-test.component.html',
  styleUrls: ['./child-test.component.css']
})
export class ChildTestComponent implements OnInit {
   
  constructor