TemplateRef 内容到变量

Question

我想获取组件 ng-content 的 innerText 作为一个简单的字符串，以便能够重用它。

我试过这样的事情：

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

目标是将我的字符串 My simple string text 放入变量 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

Answer 2

最后我找到了一个符合我想做的解决方案：

Stackblitz sample

app.component.ts

@Component({
  selector: 'my-app',
  template: `
    <div>
      <text-ellipsis>My very very very very long text sentence</text-ellipsis>
    </div>
  `,
  styles: [`
    div {
      width:100px
    }
  `]
})
export class AppComponent  {
}

text-ellipsis.component.ts

@Component({
  selector: 'text-ellipsis',
  template: `
    <div class="text-container">
      <span [title]="text.innerText" #text><ng-content></ng-content></span>
    </div>
  `,
  styles: [`
    .text-container {
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
    }
  `]
})
export class TextEllipsisComponent {
}

通过这种方式，我可以显示 ng-content 提供的文本并在 title 属性中设置它。

TemplateRef 内容到变量

TemplateRef Content to Variable

typescript

transclusion

angular