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

有关更复杂的场景，请参阅：

Angular: 如果包含的内容存在则换行

Angular: wrap transcluded content if it exists

transclusion

angular-template

angular