当我们在使用Angular的Action binding时,如果我们继承了一个父组件,并且想要在子组件中使用父组件中的属性,那么可能会出现Action binding忽略继承的属性的问题。
为了解决这个问题,我们可以使用super
来获取父类中的属性,并在子类中重新定义Action binding。
以下是一个使用super
解决Action binding忽略继承的属性的例子:
在父组件中定义一个属性值:
export class ParentComponent {
protected title: string = 'Welcome to Parent Component';
}
在子组件中继承父组件,并使用super
来获取父组件中的属性:
@Component({
selector: 'app-child',
template: `
{{ title }}
`
})
export class ChildComponent extends ParentComponent {
constructor() {
super();
}
public onClick() {
console.log(`Button clicked in the child component!`);
}
}
在子组件的模板中使用父组件中定义的title
属性,并在子组件中重新定义一个Action binding来执行点击事件。
这样我们就可以使用继承的属性并且成功执行Action binding了。