使用@Input组件在父子之间进行角度通信不起作用，但不会出现任何错误

Question

通过学习本教程，我正在学习角度组件之间的通信：

  

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

在我的项目中，我复制了父组件：

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

子组件：

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

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

  @Input() childMessage: string;

  constructor() { }

}

在app.component.html中，我添加了子组件标签：

<app-child></app-child>

这是浏览器中的结果：

由于某种原因，它不显示消息值。
而且控制台中没有错误。
我不明白为什么会这样。
如果您知道原因，请发表评论。 谢谢！

Answer 1

实际上，您需要调用父级组件将 @input 解析为子级组件。您直接调用子选择器，这就是为什么您无法显示任何内容的原因。

因此，请在 app.component.html 中调用父组件以获取输入字符串，

<app-parent></app-parent>

Answer 2

您需要更新app.component.html以使用父组件而不是子组件，然后它才能正常工作。例子

<app-parent />