在Angular2中创建包装器组件

Question

我刚刚开始将我的Angular 1.x指令转换为Angular 2组件,但我首先陷入困境.我有2个指令,即row-field和column-field.它们可以用来创建自举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;
}

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

任何建议将被认真考虑.

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>
`,