使用指令更改@Input 属性

Question

我有以下组件：

@Component({
  selector: 'box',
  [...]
})
export class BoxComponent {
  @Input() collapsable: boolean = false;
  [...]
}

我可以将它与 <box [collapsable]="true"></box> 一起使用，而且效果很好。但是我想使用指令将属性 collapsable 更改为 true ，如 <box box-collapsable></box>.

我尝试了以下指令，但它不起作用：

@Directive({
  selector: '[box-collapsable]',
})
export class BoxCollapsableDirective {
  constructor(private el: ElementRef) {}

  ngAfterViewInit(): void {
    this.el.nativeElement.attributes.collapsable = true;
  }
}

我没有收到任何错误，但 BoxComponent 中的 collapsable 保持错误。有什么方法可以使用指令来更改输入属性吗？

Answer 1

您可以注入 BoxComponent 实例，而不是将 ElementRef 注入指令：

@Directive({
  selector: '[box-collapsible]'
})
export class BoxCollapsibleDirective {
  constructor(private box: BoxComponent) {} // <--- inject BoxComponent instance

  ngAfterViewInit() {
    this.box.collapsible = true;
  }
}

这将使您可以直接访问组件的公开属性，包括其输入属性。

Here's a StackBlitz 展示了这种方法。（一秒钟后，指令将 collapsible 从 true 更改为 false。）

使用指令更改@Input 属性

Use directive to change @Input attribute

angular

angular-directive