Question

是否可以将ng-content标签之间的内容限制为仅文本？我怎么能这样做？

我知道我可以使用类型安全的输入参数作为替代，但我仍然想知道这是否可行。谢谢！

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

另见javascript check if child node is element or text node

Answer 2

您可以创建一个获取内部文本并替换元素内容的指令。

示例

@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
  }

}

您只想保留内部文字的地方：

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

输出：

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

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

2 个答案: