使用指令更改@Input 属性答案

【问题标题】：Use directive to change @Input attribute使用指令更改@Input 属性
【发布时间】：2021-04-01 21:22:27
【问题描述】：

我有以下组件：

@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 保持为假。有没有办法使用指令来改变输入属性？

【问题讨论】：

标签： angular angular-directive

【解决方案1】：

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

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

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

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

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

【讨论】：