Angular - 只允许 ng-content 中的文本

Question

Is it possible to limit the contents between my ng-content tags to just text? How can I do this?

I understand I can use a type-safe input parameter as an alternative, but I would still like to know if this is possible. Thanks!

Answer 1

@Component({
  selector: 'foo',
  template: `
    <div #wrapper>
     <ng-content></ng-content>
    </div>
  `
})
export class FooComponent {
  @ViewChild('wrapper') wrapper;

  ngAfterContentInit() {
    var nodes = this.wrapper.childNodes;
    for (var i = 0; i < nodes.length; i++) {
      if (nodes[i].nodeType != Node.TEXT_NODE) // or if (nodes[i].nodeType != 3)
      throw 'Only text is supported as content
    }
  }
}

See also javascript check if child node is element or text node

Answer 2

You can create a directive which get inner text and replace element content.

Example

@Directive({
  selector: '[text-content]'
})
export class TextContentDirective implements OnInit {

  constructor(
      private el: ElementRef
  ) {
  }

  ngOnInit(): void {
    this.extractTextContent()
  }

  private extractTextContent() {
    this.el.nativeElement.innerHTML = this.el.nativeElement.innerText
  }

}

where you want to keep only the internal text:

<h1 text-content><ng-content select="dialog-header-title"></ng-content></h1>

output:

<h1 text-content>My Title</h1>