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，或者可以使用它{/ p>

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

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

1 个答案: