angular 父子组件传值@Input @Output @ViewChild
一、 父组件给子组件传值 -@Input
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