在 angular 8 數據輸入數據綁定中不起作用？

Question

這個問題之前被問過多次，我對提供的所有解決方案感到滿意。 但我陷入了基本問題，即。 如何從父組件獲取數據到子組件。 不知道我在這里做錯了什么！！！

app.component.ts

import { Component } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})

export class AppComponent {
  message: string = "Hello World!";

  constructor() {
    //
  }

  ngOnInit() {
    //
  }
}

應用程序組件.html

<div class="app">
    <div class="menu">
        <app-menu></app-menu>
    </div>

    <div class="body">
        <div class="container">
            <router-outlet></router-outlet>
        </div>
    </div>

    <footer>
        <app-footer></app-footer>
    </footer>
</div>

頁腳.component.ts

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

@Component({
  selector: 'app-footer',
  templateUrl: './footer.component.html',
  styleUrls: ['./footer.component.scss']
})

export class FooterComponent implements OnInit {

  @Input() message: string;

  constructor() {}

  ngOnInit() {
    console.log(this.message);
  }

}

該ngOnInit()的函數調用footer.component.ts總是返回undefined

Answer 1

您尚未將 app-root 的消息綁定到子組件。 模板彼此隔離，並且不會從呈現它們的父級繼承任何屬性。 相反，您必須使用數據綁定將數據傳遞給模板。

嘗試這個：

<footer>
    <app-footer [message]="message"></app-footer>
</footer>

請參閱模板語法