使用指令更改@Input 属性
Use directive to change @Input attribute
我有以下组件:
@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
保持错误。有什么方法可以使用指令来更改输入属性吗?
您可以注入 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。)
我有以下组件:
@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
保持错误。有什么方法可以使用指令来更改输入属性吗?
您可以注入 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。)