javascript - Angular 2 绑定(bind)到组件选择器

Question

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

示例:

@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;
}