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

问题描述 投票:1回答:1

[在一个简单的角度应用程序中,我创建了一个如下所示的测试组件:

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)中进行复制非常简单。

提前感谢。

javascript angular typescript
1个回答
0
投票

首先您需要了解以下行

this['TestComponent']

在javascript中,您可以通过两种方式访问​​类属性。 Class.propertyClass["property"]。因此,当您编写this["TestProperty"]时,您实际上是在说:Get AppComponentInstance.TestProperty

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

现在基于此,您到底想实现什么?获取类型或类型的实例?您想将该类型用于什么?

© www.soinside.com 2019 - 2024. All rights reserved.