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

angular 2绑定到组件选择器

1 个答案: