Angular 父子组件以及组件之间通讯

 

 一、 父组件给子组件传值-@input

例如 根组件是

home是父组件

header是子组件

在home.component.html引入子组件：<header

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

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

在父组件中定义数据

public msg:string="首页组件的标题"

2. 子组件引入 Input 模块

header.component.ts引入：

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

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

export class HeaderComponent implements OnInit {

//接受父组件传来的数据
@Input() msg:string

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

header.component.html:

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

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

（1）在父组件home.component.ts中定义方法

例如

run(){

alert"我是父组件的run方法")

}

（2）在父组件中home.component.html中引入子组件

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

（3）在子组件header.component.ts

@input() run:any

 把父组件整个实例传给子组件，子组件可以调用父组件的数据和方法

1.在父组件中home.component.html中引入子组件

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

【home】中home为自定义

2.在子组件header.component.ts

@Input() home:any;

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

例如

父组件：new

子组件：footer

1.在父组件中new.component.html中引入子组件

定义子组件名称

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

2.子组件footer.component.ts定义数据和方法

 3.父组件中html中

<button (click)='getchildMSg()'>获取子组件的msg</button>

<button (click)='getchildrun()'>执行子组件的run</button>

4.在父组件ts中，引入ViewChild，button中的定义方法

 非父子组件之间传值和共享方法

1.服务可以实现

2.Loclstorage