Question

假设我有以下情况：

html,
body,
#map_canvas {
  height: 100%;
  margin: 0;
  padding: 0
}
code {
  background: #fff;
  padding: 2px;
  font-size: 1.5em;
  border: 1px solid #000;
  border-radius: 5px;
}

因此，当单击按钮时，我想重新渲染组件，以便在底层组件上填充新值。我也尝试过双向绑定，但在这种情况下没有多大意义，因为它是单向绑定。所以问题是如何触发更新？

谢谢！

Answer 1

实际上，如果您使用插值（就像您一样）使用输入和在父组件中更新时，该值会自动更新到您的子组件中。

以下是定义子组件的方法：

import {Component,Input} from 'angular2/core';

@Component({
  selector: 'my-component',
  template: `
    <div>{{myAttr}}</div>
  `
})
export class MyComponent {
  @Input()
  myAttr: number;

}

请参阅此plunkr：https://plnkr.co/edit/ka9fd9?p=preview。

Answer 2

你不需要触发任何东西。由于Angular变化检测的工作方式，更新会自动进行。

Angular monkey-patches在Angular＆＃34;区域内定义的所有异步事件＆＃34; （例如您的(click)事件绑定），因此在onClick()事件处理程序完成后，Angular将自动运行更改检测。

更改检测会注意到myAttr绑定到MyComponent的输入属性，它会自动将新值传播到子组件。更改检测还会注意到（如果我们使用Thierry的示例）属性myAttr绑定到div，它会自动将新值传播到div＆＃39 ; s textContent财产。角度变化检测完成后，浏览器会注意到DOM更改并更新您在屏幕上看到的内容。

Answer 3

你是对的，但是还有一件事 - 应该使用哪个事件来检测子组件中的这种变化以执行某些逻辑。我可以看到例如ngAfterContentCheck事件被触发，但它多次触发，我似乎无法弄清楚原因。

还有一件事 - 我可以从子组件推送更新。因此，例如，当子组件中的某些内容发生更改时（来自用户输入或类似内容），将更新控制myAttr的my-app组件。我在这里想到React的方式，所以我不确定这是正确的方法。

更改属性时重新呈现Angular2组件

3 个答案: