Question

我试图获取在组件本身的自定义组件中添加的文本（带有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() 
  {

  }
}

我怎样才能得到＆＃39; ul＆＃39;它是组件代码中的孩子所以我可以在特定的位置显示它？通过属性传递文本会使其失去结构。

我已经通过ElementRef尝试了，但我只通过nativeElement获得了detail-tag，而不是它的孩子。

Answer 1

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

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

导入的

Answer 2

你可以这样做：

在<ul>的HTML模板中设置变量，例如#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/

从自定义组件标记

2 个答案: