Angularjs 在Angular2中创建包装器组件

我刚开始将Angular 1.x指令转换为Angular 2组件，但我还是停留在第一位。我有两个指令，即行字段和列字段。它们可以用来创建引导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中创建相同的行为时遇到了麻烦。 我的列字段组件如下所示

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

@组件({
选择器：“列字段”，
模板：“”，
指令：[NgClass]
})
导出类ColumnFieldComponent{
@输入（）span；
@输入（）偏移量；
}

但它并没有创建所需的html输出。输出中总是有一个列字段标记，我想用div标记替换列字段标记，并将其属性移动到这个新的div标记

---

任何建议都将不胜感激。

Angular2不支持此类替换

您也不能添加类或其他属性（除了

select=“…”

）如

[ngClass]=“'span{span}offset{{offset}}'”

。这不会产生任何效果，因为从未将

元素添加到DOM中。它只是创建一个内部标记，将子元素转移到其中

您可以像这样包装

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

模板：`
`,

我已经试过了，但是输出变成了

第一个单元格…

这对我来说是无用的。我是否应该创建指令而不是组件来实现此替换行为我不知道获得替换行为的解决方法。为组件使用属性选择器（而不是标记选择器）将使您摆脱

列字段

标记。在这里可以看到甘特的答案：