Angular 2：动态选择器属性

Question

我目前正在尝试查看是否可以在 Angular 2 中创建动态 selectors/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-->

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

Answer 1

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

组件网代码：

sample.ts

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

 @Input() myInput: MyInput;

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

放置选择器（父）的模板：

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

注意：anotherVariable 值是在 Component 父级中设置的。

Angular 2: dynamic selector property