Angular中的父子组件传值 @Input 和@ViewChild 及组件之间的通信I

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

1. 父组件调用子jie组件时传入数据I

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

2. 子组件引入input 模块

import { Input  ,  OnInit  , Component } from "@angulat/core" 

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

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

二 父组件通过@ViewChild 主动获取子组件的数据和方法
1 定义一个属性

<div #mybox></div>

2 引入模块

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

3 获取dom节点

//写在类中
@ViewChild('mybox') mybox1:any;//@ViewChild('mybox') mybox1:ElementRef;

三 非父子组件的通讯
1 通过 localstorage

2 通过 service 服务来实现