angular父子传值

header组件

ts
**import { Component, OnInit ,Input} from '@angular/core';
//input引入
@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.css']
})
export class HeaderComponent implements OnInit {
  @Input() title:any;  //接收数据
  constructor() { }

  ngOnInit() {
  }

}


html
<header>{{title}}</header>

home组件
ts
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
  public title:string="我是你爸爸知道吗";  //定义一个数据
  constructor() { }

  ngOnInit() {
  }

}


html
<app-header [title]="title"></app-header>
<br>
<hr>
<br>
<div>我是首页组件</div>

主组件引入

<app-home></app-home>