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

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

typescript
import { Component, ContentChild, ElementRef, AfterContentInit } from '@angular/core';
@Component({
  selector: 'app-content-checker',
  template: `
    
      
    
  `,
  styles: [`
    .content-wrapper {
      border: 1px solid #ccc;
      padding: 10px;
    }
  `]
})
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');
    }
  }
}

typescript
import { Component } from '@angular/core';
@Component({
  selector: 'app-parent',
  template: `
    
      
Hello, ng-content!
    
    
      Content exists in ng-content!
    
    
      No content in ng-content!
    
  `,
})
export class ParentComponent {}