Angular 没有喷油器的元件？

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 ，导入ComponentFactoryResolver以便您可以创建一个组件工厂。 一旦你有了那个工厂，你就可以将它插入到你的组件中。 如果您这样做，动态组件中的注入器将被解析。 你不必传入任何东西。

• https://angular.io/api/core/ViewContainerRef
• https://angular.io/api/core/ComponentFactoryResolver

它不像做new MyComponent(...)那样简单

Answer 2

只需通过一个空的注射器

createCustomElement(MyElementComponent, Injector.create({ providers: [] }));