AngularJS属性更改传播

Question

我有点新手问题，但我已经花了一天的时间了......

我有以下AngularJS2应用程序（使用beta1）：

@Component({
  selector: 'my-app',
  template: `
    <btn></btn>
  `,
  directives: [Button]
 })
 class AppComponent {}
 bootstrap(AppComponent);

然后我定义了组件，例如

@Component({
  selector: 'btn',
  template: `
    <div [hidden]="active">aaaa!</div>
    <button (click)="onClick()">Click Me</button>
    `
 })
export class Button {
  active: boolean = false;
  onClick() {
    this.active = true;
    console.log(1) //successfully logs 1 to the console
  }

}

猜

猜 - 该死的div 不会隐藏。

感谢您的任何帮助！

Answer 1

您如何通过系统 js 或脚本标签加载 angular 库文件？如果 Systemjs 我有同样的问题：https://github.com/angular/angular/issues/6719

如果通过脚本标签，您可以尝试类似的东西：

<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="node_modules/rxjs/bundles/Rx.js"></script>
<script src="node_modules/angular2/bundles/angular2.dev.js"></script>

Answer 2

我无法重现您的问题。这是我使用的 plunkr。

你能看到内存中 DOM 中的hidden属性吗？我在Chrome上使用beta1进行了测试。

希望对您有所帮助，蒂埃里

Answer 3

这很可能是 CSS 问题或浏览器如何解释[hidden]。默认情况下，<div>具有display: block;我还注意到有时块元素会忽略[hidden]属性。您的代码在 Chrome 中有效。

您可以添加css类，它将被隐藏：

[hidden] {
  display: none !important;
}

Answer 4

我正在使用 webpack，事实证明该问题是由于缺少/angular2-polyfills.min.js 文件引起的。

感谢您的帮助！