0

我将 Angular 8 应用程序升级到了 Angular 9 应用程序。在我的一个指令中，我通过 viewcontainer _data 属性访问组件。这似乎不再存在于 angular 9 中。如何访问 angular 9 中的组件？

我有多个带有 viewchild 'errorContainer' 的输入。它们都继承自 Abstractinput。这样，当我有一个 formcontroll 时，我可以通过指令将错误放在组件上。

@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 {
}

输入.html

<div #errorContainer></div>
4

1 回答 1

0

只需注入您的组件

constructor(myComponent: MyComponent) {
}

如果组件并不总是同一个组件，您可以通过为其提供一些令牌来做到这一点

@Component({
providers: [{provide: COMPONENT_FOR_DIRECTIVE_TOKEN, useExisting: AnyComponent}]
})
class AnyComponent {
}
于 2020-02-14T10:08:05.583 回答