Angular

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 中的文本

Angular - Only allow text in ng-content

transclusion