Angular 2 : dynamic selector property

Question

我目前正在尝试查看是否可以在 Angular 2 中创建动态选择器/html 标签。例如，我想做这样的事情:

@Component({
    selector: 'my-app' + 'variableName',
    template: `
    <container> </container>
    `,
    directives: [ContainerComponet]
})

这样我就可以做类似的事情:

<my-app + {{variableName}}> <!-- the variable name would be coming from a public variable inside my component-->

在某种程度上，我的组件的实现需要进行多次，我知道我可以复制/粘贴我拥有的内容并拥有多个组件，但我觉得必须有一个更聪明的方法。

Answer 1

这对我有用，在我的例子中，模板是相同的，但它需要根据某些值进行更改(颜色更改)。所以在父组件中设置了这些值，并基于这些值我的组件表现不同

组件网代码:

样本.ts

@Component({
    selector: 'my-app-sample' 
    templateUrl: 'sample.html'
})

 @Input() myInput: MyInput;

此组件和模板 (sample.ts) 是另一个组件的子组件。在父模板中，我们“删除”样本选择器:my-app-sample

放置选择器的模板(父级):

<div>
<my-app-sample [myInput] = "anotherVariable"</my-app-sample>
</div>

注意:anotherVariable 值是在父组件中设置的。