Angular入门教程 | 06Angular组件间的通信

父子组件间的通信

我们希望一个组件在不同的组件之间引用的时候，显示不同的内容，这个时候就需要父组件向子组件传值。

父组件给子组件传值 @input

它不仅可以接收父组件传递的值，还可以接收父组件传过来的整个方法

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

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

2.子组件引入input模块

import {Component , Oninit , Input}

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

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

接下来我们看一个例子：

//1.首先我们创建两个组件，home组件和header组件，然后在home组件中引入header组件
<!-- 在home组件里面引入头部组件 -->
<!--在调用子组件的时候先自定义一个属性 -->
<app-headers></app-headers>

//2.在父组件中定义要传递的值
export class HomeComponent implements OnInit {
  public keywords = ''

  public title:string = '我是首页'
  public msg:string = '我是父组件的msg'
  
  constructor() {
  }

  // 这个生命周期只是组件和指令初始化完成，并不是dom加载完成
  ngOnInit(): void { }

}

//3.通过自定义属性来引用在父组件中定义的数据
<!-- 在home组件里面引入头部组件 -->
<!--在调用子组件的时候先自定义一个属性 -->
<app-headers [title]="title" [msg]='msg'></app-headers>

//4.在子组件中引入input，并且通过装饰器使用传过来的值
// 在子组件中接收父组件传过来的值
import { Component, OnInit ,Input } from '@angular/core';

@Component({
  selector: 'app-headers',
  templateUrl: './headers.component.html',
  styleUrls: ['./headers.component.scss']
})
export class HeadersComponent implements OnInit {

  constructor() { }
// 通过装饰器接收 
  @Input() title:any
  @Input() msg:any

同样的，在子组件中调用父组件的方法和传值是一样的方法，这里就不举例说明了。

子组件通过@Output触发父组件的方法

（其实前一篇文章里面讲过一种方法，通过ViewChild来实现 接下来介绍另外一种方法供参考了解）

1.子组件引入Output和EventEmitter

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

2.子组件中实例化 EventEmitter

@Output() private outer = new EventEmitter<string>();

然后在下边的方法中通过this.outer.emit()来触发