Angular 8：检测 ng-content 中是否有内容（或存在）

typescript

# Angular 8：检测 ng-content 中是否有内容的方法及案例

Angular是一种流行的前端框架，它提供了丰富的功能来构建现代化的Web应用程序。在Angular中，ng-content是一个强大的指令，允许将内容投影到组件的模板中。然而，有时我们可能需要在运行时检测ng-content中是否有实际内容，或者是否存在。在本文中，我们将探讨如何实现这一目标，并提供相应的案例代码。

## 检测ng-content是否有内容

在Angular中，我们可以通过查询ContentChild来访问ng-content的引用，并检查它是否存在实际内容。以下是一个简单的组件示例，演示了如何在组件中检测ng-content是否包含内容：

typescript
import { Component, ContentChild, ElementRef, AfterContentInit } from '@angular/core';
@Component({
  selector: 'app-content-checker',
  template: <code>
    <div class="content-wrapper">
      <ng-content></ng-content>
    </div>
  </code>,
  styles: [<code>
    .content-wrapper {
      border: 1px solid #ccc;
      padding: 10px;
    }
  </code>]
})
export class ContentCheckerComponent implements AfterContentInit {
  @ContentChild('content') content: ElementRef;
  ngAfterContentInit() {
    if (this.content && this.content.nativeElement.innerHTML.trim() === "") {
      console.log('ng-content is empty');
    } else {
      console.log('ng-content has content');
    }
  }
}

在上面的例子中，我们创建了一个名为ContentCheckerComponent的组件，其中包含了一个具有ng-content的简单模板。通过使用ContentChild装饰器，我们获取了ng-content的引用，并在ngAfterContentInit生命周期钩子中检查其内容是否为空。

## 案例演示

让我们通过一个实际的案例演示上述组件的使用。假设我们有一个父组件，其中包含了ContentCheckerComponent，并且我们想要根据ng-content是否包含内容来显示不同的消息。以下是父组件的示例：

typescript
import { Component } from '@angular/core';
@Component({
  selector: 'app-parent',
  template: <code>
    <app-content-checker #contentChecker>
      <div #content>Hello, ng-content!</div>
    </app-content-checker>
    <div *ngIf="contentChecker.content && contentChecker.content.nativeElement.innerHTML.trim() !== ''">
      Content exists in ng-content!
    </div>
    <div *ngIf="!contentChecker.content || contentChecker.content.nativeElement.innerHTML.trim() === ''">
      No content in ng-content!
    </div>
  </code>,
})
export class ParentComponent {}

在这个例子中，我们在app-content-checker组件中包含了一个包含内容的ng-content。然后，通过使用*ngIf指令，我们根据ng-content中是否存在内容来显示不同的消息。

通过这个简单的示例，我们演示了如何检测ng-content是否包含内容，并在父组件中根据这个条件采取相应的操作。这是一个在实际项目中能够应用的实用技巧，使我们能够更灵活地操作ng-content的内容。