Question

我正在尝试Angular的自定义元素，并尝试避免使用Angular的依赖项注入

const MyElementElement = createCustomElement(MyElementComponent, { injector });
customElements.define('my-element', MyElementElement);

但是，如果不传入注射器，就无法创建自定义元素

createCustomElement(MyElementComponent)

有没有一种方法可以使用自定义元素而不使用Angular的依赖注入？

Answer 1

我不确定您的createCustomElement函数在做什么，但是如果您想动态地动态添加组件，这就是您要遵循的模式。

import { Component, ComponentFactoryResolver, OnInit, ViewChild, ViewContainerRef } from '@angular/core';

@Component({
    selector: 'app-something',
    templateUrl: './something.component.html',
    styleUrls: ['./something.component.scss']
})
export class SomethingComponent implements OnInit {
    @ViewChild('containerRef', { read: ViewContainerRef }) viewContainerRef: ViewContainerRef;
    private readonly _cfResolver: ComponentFactoryResolver;
    constructor(_cfr: ComponentFactoryResolver) {
        this._cfResolver = _cfr;
    }

    ngOnInit() {
        const componentFactory = this._cfResolver.resolveComponentFactory(MyComponent);
        const componentRef = this.viewContainerRef.createComponent(componentFactory);
        // Component Ref then has access to all it's properties
        // So you can then do things like
        // componentRef.instance.myComponentProperty = 'something';
    }
}

在HTML中，放置以下标记的位置是控制组件插入位置的方式：

<ng-template #containerRef></ng-template>

基本上，在要执行“动态工作”的组件中，导入ComponentFactoryResolver，以便创建组件工厂。一旦有了该工厂，就可以将其插入到组件中。如果这样做，动态组件中的喷射器将解析。您不必传递任何内容。

这不像做new MyComponent(...)

那样简单

没有喷射器的角元件？

1 个答案: