javascript - Angular 2 中的字符串插值不显示更新值

Question

我正在尝试学习 Angular 2，在遵循此文档时遇到了一个奇怪的问题:https://angular.io/docs/ts/latest/guide/user-input.html用于将按钮点击绑定(bind)到我的 Controller 上的方法。

我从他们的点击事件绑定(bind)示例开始。我使用 Angular cli 创建了一个简单的应用程序 ng new test-app并对其进行了修改，使其包含一个按钮，当我单击该按钮时，只需向页面添加一条消息。

我有两个组件，应用程序组件和消息组件，如下所示:

message.component.html:

<p>{{message}}</p>

message.component.ts:

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

@Component({
  selector: 'app-message',
  templateUrl: './message.component.html',
  styleUrls: ['./message.component.css']
})
export class MessageComponent implements OnInit {

  message: string;

  constructor() {
    this.message = 'some initial message';
  }

  ngOnInit() {
  }

}

app.component.html:

<button (click)="addMessage()">Click</button>
<app-message *ngFor="let message of messages"></app-message>

app.component.ts:

import { Component } from '@angular/core';
import { MessageComponent } from './message/message.component';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  messages = [];

  addMessage() {
    const newMessage = new MessageComponent();
    newMessage.message = 'Something else entirely';
    this.messages.push(newMessage);
  }
}

当我使用 ng serve 运行此命令时，该按钮按预期显示，但是当我单击该按钮时，仅显示消息 some initial message尽管我的应用程序 Controller 赋予了不同的值，但仍然出现。在进行搜索时，我发现了一种不同的方法来进行单向数据绑定(bind)，将字符串插值替换为: <p [innerText]="message"></p>但结果是一样的。

我有点不知所措，为什么它不会显示 Something else entirely 的更新值.

Answer 1

MessageComponent 组件应将消息作为@Input:

export class MessageComponent implements OnInit {

 @Input() message: string;
}

AppComponent 应该将此输入发送给其子组件，例如

 <app-message *ngFor="let message of messages" 
  [message]="message.message"></app-message>