使用指令更改@Input属性

Question

我有以下组件：

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

我可以在<box [collapsable]="true"></box>中使用它，它工作得很好。但我想使用一个指令将属性collapsable更改为<box box-collapsable></box>中的true。

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

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

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

我没有得到任何错误，但是BoxComponent中的collapsable保持为false。有没有办法使用指令来改变输入属性？

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。)