在Angular2中创建包装组件

Question

我刚开始把我的Angular 1.x指令转换为Angular 2组件，但我卡在了第一步。我有两个指令，分别是row-field和column-field。它们可以用来创建bootstrap的12个单元格网格，如下所示：

<row-field>
    <column-field span="4">First Cell</column-field>
    <column-field span="2" offset="1">Second Cell</column-field>
    <column-field span="4">Third Cell</column-field>
</row-field>

这将会输出如下格式的HTML代码：

<div class="row">
    <div class="span4">First Cell</div>
    <div class="span2 offset1">Second Cell</div>
    <div class="span4">Third Cell</div>
</div>

在 Angular 1.x 中，使用指令的 tranclude 和 replace 属性非常容易实现。但我在 Angular 2 中创建同样的行为时遇到了困难。我的 column-field 组件如下：

@Component({
    selector: 'column-field',
    template: '<ng-content [ngClass]="'span{{span}} offset{{offset}}'"></ng-content>',
    directives: [NgClass]
})
export class ColumnFieldComponent {
    @Input() span;
    @Input() offset;
}

但是它并没有产生期望的HTML输出。输出中总会有一个column-field标签，我想要用div标签替换column-field标签，并将其属性移动到这个新的div标签。任何建议将不胜感激。

- ibrahimb

---

使用属性选择器来选择组件（而不是标签选择器）将让您摆脱column-field标签。请参见Günter在此处的答案：https://dev59.com/q1kT5IYBdhLWcg3wXuTP#38716164 - Greg

Answer 1

Angular2不支持此类替换。

您也无法添加类或其他属性（除了select="..."），例如[ngClass]="'span{{span}} offset{{offset}}'"。这样不起任何作用，因为<ng-content>元素从未被添加到DOM中。它只是创建一个内部标记，指示在哪里透传子元素。

您可以像下面这样包装<ng-content>：

template: `
<div [ngClass]="'span{{span}} offset{{offset}}'">
  <ng-content></ng-content>
</div>
`,

- Günter Zöchbauer

---

我已经尝试过了，但输出结果变成了<div class="row"><column-field><div class="span4">First Cell</div></column-field>...，对我来说没有用。我该创建指令还是组件来实现这种替换行为？ - ibrahimb

我不知道有什么解决方法可以获得替换行为。 - Günter Zöchbauer