angular 2 绑定到组件选择器答案

【问题标题】：angular 2 bind to component selectorangular 2 绑定到组件选择器
【发布时间】：2016-12-09 11:22:31
【问题描述】：

当属性为真时，我需要隐藏一个组件。有没有办法在组件本身内解决这个问题。

例子：

@Component({
  selector: 'prio-tab',
  changeDetection: ChangeDetectionStrategy.OnPush,
  template:
  `
      <div [hidden]="!active">
        stuff
      </div>
    `
})

export class PrioTabComponent {
  @Input() title;
  active:boolean = false;
}

在这里，我想让实际的“prio-tab”元素依赖于活动标志。不仅仅是prio-tab中的内容。

或者是否可以在声明prio-tab标签时使用自己，像这样：

<prio-tab [hidden]="this.active">
     stuff
</prio-tab>

我想一个可行的解决方案是在其父级中创建对 prio-tab 组件的引用，然后通过父级。但是，如果我有多个 prio-tab，我该怎么办？

【问题讨论】：

标签： javascript angular

【解决方案1】：

您可以使用@HostBinding()

export class PrioTabComponent {
  @Input() title;

  @HostBinding('hidden')
  active:boolean = false;
}

【讨论】：

这真是太棒了！