导入组件的Angular 7动态变量名称

Question

在一个简单的 Angular 应用程序中，我创建了一个如下所示的测试组件：

test.component.ts

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

    @Component({
      selector: 'test',
      template: `<h1>I am a test</h1>`,
      styles: [`h1 { font-family: Lato; }`]
    })
    export class TestComponent  {

    }

我像这样在我的应用程序模块中导入：

app.component.ts

    import { Component } from '@angular/core';
    import { TestComponent } from './test.component';

    @Component({
      selector: 'my-app',
      templateUrl: './app.component.html',
      styleUrls: [ './app.component.css' ]
    })
    export class AppComponent  {
      name = 'Angular';
      public TestComponent = TestComponent;
      dynamic = "Test";

      constructor(){
        console.log(TestComponent);
        console.log(this.TestComponent);
        console.log(this['TestComponent']);
        console.log(this[this.dynamic + 'Component']);
      }
    }

从这个主题Angular 5 Dynamic variable name 获得帮助，我能够动态获取我的组件名称（在实际示例中，动态变量会根据 API 调用响应而变化）。

我的问题是是否有任何方法可以实现相同的结果而不必将组件作为局部类变量传递，从而避免这一行

public TestComponent = TestComponent;

如果没有 this 关键字，动态变量不起作用，它会给我一个错误

console.log([this.dynamic + 'Component']);

我尝试在 stackblitz 中添加代码，但似乎无法共享它 (https://github.com/stackblitz/core/issues/215)，但是将这两个文件复制到一个新的空 stackbitz (https://stackblitz.com/edit/angular-f4ars5) 以进行复制非常简单。

提前致谢。

Answer 1

首先你需要了解下面这行

this['TestComponent']

在 javascript 中，您可以通过两种方式访问​​类属性。 Class.property 或 Class["property"]。所以当你写this["TestProperty"]时，你实际上是在说，获取AppComponentInstance.TestProperty

所以console.log([this.dynamic + 'Component']); 就像写.TextComponent 左边什么都没有。

现在基于此，您到底想实现什么？获取类型或类型的实例？你想用这个类型做什么？

您可以做的是在某个地方声明另一个全局类并在其中包含这些属性。检查this one for global variable declaration。

你的 json 可能是这样的：

export class ComponentMapping
{
    private TestComponent = TestComponent;
}

然后在你的类中相应地访问测试组件。