Question

我试图实现＆＃34; editComponent＆＃34;可以在pageComponent或dialogComponent中显示，但同一组件中的up strong ng-content 标记不起作用（仅适用于las ng-content 标记）：

<div *ngIf="dialog">
  <ng-content></ng-content>
</div>

<!-- for pages not in dialog popups put all div structure -->
<div *ngIf="!dialog" class="container content">
  <div class="page-header">
    <h2>{{title}}</h2>
  </div>
  <div class="row">
    <div class="col-md-12">
      <ng-content></ng-content>
    </div>
  </div>
</div>

如何实现？

Answer 1

使用匹配的选择器将所有儿童转录到<ng-content> 所有不匹配的子项都会被转换为没有<ng-content>属性的第一个select="..."。

如果孩子们被传递为<template>，则有更多可能性。

有计划支持更灵活（动态）的转换方案，但目前这是相当静态的。

Answer 2

我终于以这种方式实施了：

<!-- for pages in dialog popups remove classes and header -->
<div [ngClass]="{'container content':!dialog}">
  <div class="page-header" *ngIf="!dialog">
    <h2>{{title}}</h2>
  </div>
  <div [ngClass]="{'row':!dialog}">
    <div [ngClass]="{'col-md-12':!dialog}">
      <ng-content></ng-content>
    </div>
  </div>
</div>

只有一个ng-content标记删除所有div类和标题。

angular2 rc.4 ng-content duplicated不起作用

2 个答案: