Question

6.1 父组件给子组件传值-@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. 子组件中使用父组件的数据

<p>
  child works!
  {{msg}}
</p>

5. 把整个父组件传给子组件

通过 this 传递整个组件实例

<app-header [home]="this"></app-header>

export class HeaderComponent implements OnInit {
  @Input() home:any
  
  constructor() { }
  
  ngOnInit() {
  }
}

执行父组件方法 this.home.xxx()

6.2 子组件通过 @Output 触发父组件的方法（了解）

1. 子组件引入 Output 和 EventEmitter

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

2. 子组件中实例化 EventEmitter

@Output() private outer=new EventEmitter<string>(); /*用 EventEmitter 和 output 装饰器配合使用 <string>指定类型变量*/

3. 子组件通过 EventEmitter 对象 outer 实例广播数据

sendParent(){
  // alert('zhixing');
  this.outer.emit('msg from child')
}

4. 父组件调用子组件的时候，定义接收事件 , outer 就是子组件的 EventEmitter 对象 outer

<!--$event 就是子组件 emit 传递的数据-->
 <app-header (outer)="runParent($event)"></app-header>

5. 父组件接收到数据会调用自己的 runParent 方法，这个时候就能拿到子组件的数据

//接收子组件传递过来的数据 
runParent(msg:string){
   alert(msg);
 }

6.3 父组件通过 @ViewChild 主动获取子组 件的数据和方法

1. 调用子组件给子组件定义一个名称

<app-footer #footerChild></app-footer>

2. 引入 ViewChild

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

3. ViewChild 和刚才的子组件关联起来

@ViewChild('footerChild') footer;

4. 调用子组件

run(){ this.footer.footerRun();
}

6.4 非父子组件通讯

• 公共的服务
• Localstorage (推荐)
• Cookie