javascript - 导入组件的 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"] 时，您实际上是在说，Get AppComponentInstance.TestProperty

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

现在基于此，您到底想达到什么目的？获取类型或类型的实例？您想将该类型用于什么目的？

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

你的 json 可能是这样的:

export class ComponentMapping
{
    private TestComponent = TestComponent;
}

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