使用@Input组件的父子之间的角向通信不起作用，但没有错误

Question

I am learning about communication between angular components by following this tutorial:

https://angularfirebase.com/lessons/sharing-data-between-angular-components-four-methods/

In my project, I copied the parent component:

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

@Component({
  selector: 'app-parent',
  template: `
    <app-child [childMessage]="parentMessage"></app-child>
  `,
  styleUrls: ['./parent.component.css']
})
export class ParentComponent{
  parentMessage = "message from parent"
  constructor() {}
}

And the child component:

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

@Component({
  selector: 'app-child',
  template: `
      Say {{ childMessage }}
  `,
  styleUrls: ['./child.component.css']
})
export class ChildComponent {

  @Input() childMessage: string;

  constructor() { }

}

In app.component.html, I have added the child component tag:

<app-child></app-child>

This is the result in the browser:

For some reason, it doesn't display the message value.
And there's no error in the console.
I don't understand why this is happening.
If you see why, please drop a comment. Thank you!

Answer 1

Actually you need to call Parent Component to parse your @input to the Child Component . you are directly calling the child selector that is why your not able to displaying anything.

So, call the Parent Component in app.component.html to get input string,

<app-parent></app-parent>

Answer 2

You need to update app.component.html to use the parent component instead of the child component and then it will work correctly. Example

<app-parent />