Angular 2组件动态名称

Question

如何将动态名称设置为angular 2组件？

我的模板中有下一个代码：

<{{component} [data]="data" [anotherData]="anotherData"></{{component}}>

我想在类中定义componentName

component: string = 'component';

因为现在我有下一个错误：

Uncaught (in promise): Template parse errors:
Unexpected closing tag "{{component}" ("

Answer 1

<div  [ngSwitch]="contactService.contact.cat">
        <div *ngSwitchWhen="'person'">
            <persons-edit [primary]="true"></persons-edit>
        </div>
        <div *ngSwitchWhen="'business'">
            <businesses-edit [primary]="true"></businesses-edit>
        </div>
        <div *ngSwitchWhen="'place'">
            <places-edit [primary]="true"></places-edit>
        </div>
    </div>

这就是我在我的应用程序中使用的。我定义了三个组件，并使用一个开关来显示我想要的组件。我从服务中获得选择，但您可以从根组件中获得它。像这样的东西：

@Component {
  selector: 'dynamic-component',
  ....
}

export class DynamicComponent{
@Input selectedcomponent : string;

}

然后在模板中使用它：

<dynamic-component [selectedcomponent]="person"></dynamic-component>

并且不使用服务，而是打开“selectedcomponent”。