Question

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

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

我有两个组件，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运行此按钮时，按钮会按预期显示，但是当我单击按钮时，尽管我的app控制器给出了不同的值，但只显示消息some initial message。在进行搜索时，我发现了一种不同的方法来执行单向数据绑定，方法是将字符串插值替换为：<p [innerText]="message"></p>，但结果是相同的。

我有点不知道为什么它不会显示Something else entirely的更新值。

Answer 1

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

dependencies {
    // ...
    compile 'com.google.firebase:firebase-core:10.2.4'
    compile 'com.google.firebase:firebase-messaging:10.2.4'
    // Getting a "Could not find" error? Make sure you have
    // the latest Google Repository in the Android SDK manager
}

AppComponent应将此输入发送给其子项，如

export class MessageComponent implements OnInit {

 @Input() message: string;
}

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

1 个答案: