一、 父组件给子组件传值 -@Input
1、父组件调用子组件的时候传入数据
<app-header [msg]="msg"></app-header>
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>二、 父子组件传值的方式让子组件执行父组件的方法
父组件定义方法
run(){
alert('这是父组件的 run 方法');
}2、调用子组件传入当前方法
<app-header [msg]="msg" [run]="run"></app-header>
3. 子组件接收父组件传过来的方法
import { Component, OnInit ,Input } from '@angular/core';
export class HeaderComponent implements OnInit {
@Input() msg:string
@Input() run:any;
constructor() { }
}4. 子组件使用父组件的方法。
export class HeaderComponent implements OnInit {
@Input() msg:string;
@Input() run:any;
constructor() { }
ngOnInit() {
this.run(); /*子组件调用父组件的 run 方法*/
}
}三、父组件通过局部变量获取子组件的引用 用, 通过 ViewChild 主动获取子组件的数据和方法
调用子组件给子组件定义一个名称
<app-footer #footerChild></app-footer>
2. 引入 ViewChild
import { Component, OnInit ,ViewChild} from '@angular/core';3. ViewChild 和刚才的子组件关联起来
@ViewChild('footerChild') footer;4、调用子组件
run(){
this.footer.footerRun();
}