angular4.x 父子 组件传值@Input

一、 父组件给子组件传值 -@Input
1. 父组件调用子组件的时候传入数据

ts里声明msg
export class AboutPage {
  public msg:string;
   ........
}

html里
<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>