Question

我刚开始将我的Angular 1.x指令转换为Angular 2组件，但我坚持到第一位。我有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>

使用tranclude和replace属性指向Angular 1.x相当容易。但是我在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>
`,

在Angular2中创建包装器组件

1 个答案: