Angular：包含已转换的内容（如果存在）

Question

我如何包装被抄送的内容，只有它存在？

例如，my-component的模板：

<div>
    ...
    <div *ngIf="isInvalid" class="error">
        <h2>Extra errors:</h2>
        <ng-content select="extra-error-messages"></ng-content>
    </div>
    ...
</div>

可以使用该组件

<my-component>
    <extra-error-messages>
       Do not ever try this!
    </extra-error-messages>
</my-component>

在这种情况下，应该显示div.error，或者可以使用它

<my-component></my-component>

在这种情况下，即使div.error是isInvalid，也不应出现true。

Answer 1

您可以通过extra-error-messages获取@ContentChild组件并检查它是否在父模板中显示。

所以这适用于你的情况：

@Component({
  selector: 'my-component',
  template: `
    <div>
        <h2>My component</h2>
        <div *ngIf="isInvalid && errorMessage" class="error">
                                 ^^^^^^^^^^^
                         check whether extra-error-messages is presented
            <h2>Extra errors:</h2>
            <ng-content select="extra-error-messages"></ng-content>
        </div>
    </div>

  `,
  styleUrls: ['./app.component.css']
})
export class MyComponent  {
  isInvalid = true;

  @ContentChild(ErrorMessagesComponent) errorMessage; // get transcluded component
}

Stackblitz Example

有关更复杂的方案，请参阅

• In Angular 2 how to check whether <ng-content> is empty?