angular - TemplateRef 内容到变量

Question

我希望将组件的 ng-content 的内部文本作为简单字符串获取，以便能够重用它。

我尝试过这样的事情:

@Component({
  selector: 'my-comp',
  template: `
    <div class="text-container">
      <span class="text" [title]="text">{{text}}</span>
    </div>
    <ng-template #text>
      <ng-content></ng-content>
    </ng-template>
  `
})
export class MyComponent implements AfterViewInit {
  @ViewChild('text') text: TemplateRef<string>;

  ngAfterViewInit(): void {
    console.log(this.text);
  }
}

我这样使用它:

<my-com>
  My simple string text
</my-com>

目标是将我的字符串我的简单字符串文本放入变量text ...

想法？

Answer 1

我认为您想要的东西无法实现(请参阅问题下方的评论)

我的建议是

<ng-template #text>My simple string text</ng-template>
<my-comp [text]="text"></my-comp>

然后得到它就像

  @Input() text: TemplateRef<string>;

  ngAfterViewInit(): void {
    console.log('text', this.text);
  }

然后就可以使用模板引用来输出了

<ng-container *ngTemplateOutlet="text"></ng-container>

StackBlitz example