从自定义组件标签中获取文本答案

【问题标题】：Get text from inside custom component tag从自定义组件标签中获取文本
【发布时间】：2018-02-23 16:45:45
【问题描述】：

我正在尝试获取添加到组件本身的自定义组件中的文本（带有 html-tags 和所有）。这样我就可以在正确的位置显示它。我不确定它是否可以完成，但我没有看到替代方案。

页面

<detail [content]="content" [image]="'animals.jpg'">
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

组件的.ts文件

export class DetailComponent 
{
  @Input() content: Content;
  @Input() image:   string;

  constructor() 
  {

  }
}

如何在组件的代码中获取“ul”及其子组件，以便在特定位置显示它？通过属性传递文本会使其失去结构。

我尝试过通过 ElementRef，但我只通过 nativeElement 获取详细标签，而不是子元素。

【问题讨论】：

'特定点' - 比如屏幕上的位置？

标签： angular components

【解决方案1】：

@proti 的回答是正确的。但是，由于您需要的模板在里面（假设在</ul> 标记之后有</detail> 的结束标记）

`<detail><!-- Content Needed --></detail>`

您必须使用@ContentChild 而不是@ViewChild。然后，您可以在 ngAfterContentInit() 生命周期挂钩中捕获组件中的“内容”。

模板，

<detail [content]="content" [image]="'animals.jpg'">
 <ul #content>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
 </ul>
</detail>

在组件类中，

@ContentChild('content') elemRef: ElementRef;

ngAfterContentInit() {
 // treat this.elemRef as a ElementRef type variable and do whatever you want to do with it
}

ElementRef 是从@angular/core 导入的

【讨论】：

【解决方案2】：

你可以这样做：

在 HTML 模板中为 <ul> 设置变量，例如#myUlVar

使用@ViewChild在TS中获取它

<detail [content]="content" [image]="'animals.jpg'">
<ul #myUlVar>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

export class DetailComponent 
{
  @Input() content: Content;
  @Input() image:   string;
  @ViewChild('myUlVar') ul: HTMLElement;
  constructor() 
  {

  }
}

或在此处阅读更多信息： http://learnangular2.com/viewChild/

【讨论】：