如何使用 new 关键字实例化角度组件？

Question

如何用new关键字实例化角度组件？

将以下想象成一个无模板的组件：

import { Component } from '@angular/core';

@Component({
  selector: 'my-component',
})
export class MyComponent {
constructor(private myService: MyService)
}

我知道只有在模板中找到选择器标签时才会实例化角度组件。

但是…… 如何使用 new 关键字实例化上述内容？ 因为我的组件不需要模板。

但它应该是带有@component 装饰器的角度组件。 （因为我需要依赖注入的特性）

但问题是当我创建一个新组件时，如下所示：

const comp = new MyComponent()

它还要求在实例化时也将服务实例传递给它的构造函数。像这样”

const comp = new MyComponent(new MyService())

当我们再次传入的服务依赖于其他服务时，就变得更加困难了。

像这样……

const comp = new MyComponent(new MyService(new AnotherService(new YetAnotherService(... so on))))

那么有解决办法吗？

Angular 的 DI 很不错。因为我们没有任何类似上述的问题。它会自动创建所有注入的服务。 new 关键字也可以做到这一点。

注意我尝试使用普通的打字稿类。但我还是不喜欢。我想自己使用角度组件。

这可能吗？

Answer 1

我强烈建议不要这样做。 Angular 不是为此而生的，更改检测可能无法正常工作，您必须自己管理组件。

不过不管怎样，如果要动态创建组件，可以使用ComponentFactoryResolver：

import { Component, ComponentFactoryResolver, Injector, Input, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'hello'
})
export class HelloComponent  {
  @Input() get name(): string { return this._name; }
  set name(value: string) {
    this._name = value;
    this.nameChange.emit(value);
  }
  private _name: string;

  @Output() nameChange = new EventEmitter<string>();
}

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html'
})
export class AppComponent  {
  constructor(
    private componentFactoryResolver: ComponentFactoryResolver,
    private injector: Injector
  ) { }

  ngOnInit() {
    const factory = this.componentFactoryResolver.resolveComponentFactory(HelloComponent);
    const helloRef = factory.create(this.injector);

    const hello = helloRef.instance;

    // Subscribe to output
    const subscription = hello.nameChange.subscribe(name => console.log('name changed', name));

    // Set name input
    hello.name = 'Hello!';

    // When you are done with the component, it must be destroyed
    subscription.unsubscribe();
    helloRef.destroy();
  }
}

在您的情况下没关系，因为您没有模板，但如果您需要在动态创建的组件中进行更改检测，则需要将它们附加到应用程序：

export class AppComponent  {
  constructor(
    // ...
    private applicationRef: ApplicationRef
  ) { }

  ngOnInit() {
    // create helloRef ...
    this.applicationRef.attachView(helloRef.hostView);

    // ...

    // Destroy the component
    this.applicationRef.detachView(helloRef.hostView);
    helloRef.destroy();
  }
}