angular中父組件給子組件傳值-@input

1. 父組件調用子組件的時候傳入數據

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

 

---

注意：不要在app跟組件里演示，會報錯

---