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

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

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

希望它可以帮到你，亨利

Answer 2

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

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

[hidden] {
  display: none !important;
}

Answer 3

如何通过系统js或脚本标签加载角度库文件？如果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 4

我正在使用webpack，结果发现问题是由于缺少/angular2-polyfills.min.js文件引起的。

感谢您的帮助！

AngularJS属性改变传播

4 个答案: