angular 父子组件传值@Input @Output @ViewChild

最新推荐文章于 2020-10-13 08:04:06 发布

刘小又GS2019

最新推荐文章于 2020-10-13 08:04:06 发布

阅读量452

点赞数 1

分类专栏： angular 文章标签： angular 父子组件传值

本文链接：https://blog.csdn.net/weixin_39684501/article/details/90476033

版权

本文详细介绍了Angular中父子组件间通信的几种方式，包括使用@Input从父组件向子组件传递数据，通过事件机制@Output让子组件触发父组件的方法，以及如何通过ViewChild来主动获取并操作子组件的数据和方法。

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

1. 父组件调用子组件的时候传入数据

<app-header [msg]="msg"></app

2. 子组件引入 Input 模块

import { Component, OnInit ,Input } from '@angular/core';

3. 子组件中 @Input 接收父组件传过来的数据

export class HeaderComponent implements OnInit {
 
 @Input() msg:string
 constructor() { }
 ngOnInit() {
 }
}

4. 子组件中使用父组件的数据

<h2>这是头部组件--{
  {msg}}</h2>

1. 父组件定义方法

run(){
 alert('这是父组件的 run 方法');
}

2．调用子组件传入当前方法

<app-header [msg]="msg" [run]="run"></a

关注