指令中的Angular 9访问组件
我将angular 8应用程序升级为agular 9应用程序。 在我的一个指令中,我通过viewcontainer\u数据属性访问组件。这似乎不再存在于angular 9中。如何访问angular 9中的组件 我有一个viewchild“errorContainer”的多个输入。它们都继承自Abstractinput。这样,当我有一个formcontroll时,通过指令我可以在组件上放置错误指令中的Angular 9访问组件,angular,ivy,angular9,Angular,Ivy,Angular9,我将angular 8应用程序升级为agular 9应用程序。 在我的一个指令中,我通过viewcontainer\u数据属性访问组件。这似乎不再存在于angular 9中。如何访问angular 9中的组件 我有一个viewchild“errorContainer”的多个输入。它们都继承自Abstractinput。这样,当我有一个formcontroll时,通过指令我可以在组件上放置错误 @Directive({ selector: '[formControl], [formCont
@Directive({
selector: '[formControl], [formControlName]'
})
export class DefaultControlErrorDirective implements OnDestroy, OnInit {
constructor(private vcr: ViewContainerRef) {
const component = this.vcr['_data'].componentView.component
}
}
摘要输入:
@Component({
template: ``
})
export class InputAbstractComponent implements ControlValueAccessor, OnInit {
@ViewChild('errorContainer', {read: ViewContainerRef}) errorContainerRef: ViewContainerRef;
}
抽象输入的实现
@Component({
selector: 'tg-form-input',
templateUrl: 'input.html',
providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => InputComponent),
multi: true
}
]
})
export class InputComponent extends InputAbstractComponent implements AfterViewInit {
}
Input.html
<div #errorContainer></div>
只需注入组件即可
constructor(myComponent: MyComponent) {
}
如果组件并不总是同一个组件,您可以通过向其提供一些令牌来实现这一点
@Component({
providers: [{provide: COMPONENT_FOR_DIRECTIVE_TOKEN, useExisting: AnyComponent}]
})
class AnyComponent {
}
你能详细说明一下代币吗?我想访问组件中的viewchild@ViewChild('errorContainer',{read:ViewContainerRef})errorContainerRef:ViewContainerRef;您希望在何处使用指令?我有多个组件,所有组件都有一个viewchild:(TextInputComponent,RadioInputComponent…)我在一个抽象组件中定义了viewchild,这些组件从中继承。但是如果我在我的指令中注入AbstractComponent,viewchild就不存在了。您使用的是angular的哪个版本?在版本9中,您可以向超类添加一个空的
@Component()
装饰器。在较低版本中,您需要将viewchild声明复制到所有继承人,因为旧引擎不支持元数据继承。我在问题中添加了更多信息。我用的是角度9。在angular 8中这是有效的,但在angular 9中它不再有效。