在Angular中,可以使用@Input
装饰器来定义一个属性,然后使用@HostBinding
装饰器来绑定该属性。然后,在投影内容中,可以使用[attr.disabled]
绑定该属性。
以下是一个示例,演示了如何在Angular中使用观察投影输入禁用属性:
在父组件中,定义一个disabled
属性,并使用@Input
装饰器将其暴露给外部组件:
import { Component, Input } from '@angular/core';
@Component({
selector: 'app-parent',
template: `
Parent Component
`,
})
export class ParentComponent {
@Input() disabled: boolean = false;
}
在子组件中,使用@Input
装饰器来接收父组件传递的disabled
属性,并使用@HostBinding
装饰器来绑定该属性:
import { Component, Input, HostBinding } from '@angular/core';
@Component({
selector: 'app-child',
template: `
Child Component
`,
})
export class ChildComponent {
@Input() disabled: boolean = false;
@HostBinding('attr.disabled') get isDisabled() {
return this.disabled ? true : null;
}
}
在父组件的模板中,将子组件放在
标签中,并绑定disabled
属性:
这样,当父组件的disabled
属性为true
时,子组件的按钮就会被禁用。