В angular 8 ввода данных привязка данных не работает?

Question

Этот вопрос задавался несколько раз, и я удовлетворен всеми предоставленными решениями. Но я застрял в основной проблеме c, ie. как получить данные из родительского компонента в дочерний компонент. Не знаю, что я делаю здесь не так !!!

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() {
    //
  }
}

app.component. 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>

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

См. Синтаксис шаблона