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>

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

Answer 1

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

所以这应该适用于你的情况：

@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?