Angular 2与组件选择器结合

Question

我有一个属性时需要隐藏的组件。有没有办法在组件本身中解决此问题。

示例：

@Component({
  selector: 'prio-tab',
  changeDetection: ChangeDetectionStrategy.OnPush,
  template:
  `
      <div [hidden]="!active">
        stuff
      </div>
    `
})
export class PrioTabComponent {
  @Input() title;
  active:boolean = false;
}

在这里，我想拥有实际的" prio-tab"元素来依赖于active-flag。不仅是PRIO-TAB中的内容。

或在声明prio-tab标签时可能可以使用自身，例如：

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

我想一个工作解决方案是创建对父母中的prio-tab组件的引用，然后浏览父。但是，如果我有多个prio-tab，该怎么办？

Answer 1

您可以使用@HostBinding()

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