可以使用以下两种方法之一来解决此兼容性问题:
方法1:使用ng-template代替ng-container
在Angular 10中,ng-container不再支持@Host()修饰符。如果你想在@Host()上使用ng-container,则可以使用ng-template代替它。下面是一个例子:
@Directive({
selector: '[my-dir]'
})
export class MyDirective {
constructor(private template: TemplateRef) {}
@HostListener('click')
onClick() {
console.log(this.template);
}
}
@Component({
selector: 'my-app',
template: `
My content
`
})
export class AppComponent {}
方法2:使用模板变量
第二种方法是使用模板变量来代替@Host()中的ng-container。具体而言,你可以通过在@Host()中使用模板变量来引用ng-container。下面是一个例子:
@Directive({
selector: '[my-dir]'
})
export class MyDirective {
constructor(private container: ViewContainerRef) {}
@HostListener('click')
onClick() {
console.log(this.container);
}
}
@Component({
selector: 'my-app',
template: `
My content
`
})
export class AppComponent {}