Javascript angular 2访问组件内的ng内容

如何从组件类本身访问组件的“内容”

我想这样做：

<upper>my text to transform to upper case</upper>

<upper #upper>my text to transform to upper case</upper>

---

PS：我知道我可以使用管道进行大写转换，这只是一个示例，我不想创建大写组件，只知道如何使用component类从中访问组件的内容。

为此需要利用

@ContentChild

装饰程序

@Component({
  selector: 'upper',
  template: `<ng-content></ng-content>`
})
export class UpperComponent {
  @Input 
  content: String;

  @ContentChild(...)
  element: any;
}

---

有关更多详细信息，请参阅此plunkr:

如果要获取转写内容组件的引用，可以使用：

@Component({
    selector: 'upper',
    template: `<ng-content></ng-content>`
})
export class UpperComponent {
    @ContentChild(SomeComponent) content: SomeComponent;
}

@组件({
选择器：'上'，
模板：``
})
导出类上层组件{
@ContentChild（SomeComponent）content:SomeComponent；
}

如果包装

，则可以访问转写的内容，如

@Component({
    selector: 'upper',
    template: `
  <div #contentWrapper>
    <ng-content></ng-content>
  </div>`
})
export class UpperComponent {
    @ViewChild('contentWrapper') content: ElementRef;

    ngAfterViewInit() {
      console.debug(this.content.nativeElement);
    }
}

@组件({
选择器：'上'，
模板：`
`
})
导出类上层组件{
@ViewChild（'contentWrapper'）内容：ElementRef；
ngAfterViewInit（）{
调试（this.content.nativeElement）；
}
}

类SomeDir实现AfterContentInit{
@ContentChildren（ChildDirective）ContentChildren:QueryList；
ngAfterContentInit（）{
//内容已设置
}
}

请注意，如果执行console.log（contentChildren），它将仅在ngAfterContentInit或更高的事件上工作。

早上好

我一直在做一些关于这个主题的研究，因为在我的项目中也发生了类似的事情。我发现有两个装饰器可以帮助您实现这个解决方案：ViewChildren和ContentChildren。主要根据我在网络中发现的不同，ViewChildren访问组件的内部，ContentChildren访问DOM或组件本身

要从ng内容访问上部元素，必须更改上部元素，使其保持如下状态：

<upper>my text to transform to upper case</upper>

<upper #upper>my text to transform to upper case</upper>

要转换为大写的我的文本

然后只需访问内部（在具有ng内容的组件中）：

@ViewChildren（'upper'）upper:QueryList

以及访问组件（在具有ng内容的组件中）：

@ContentChildren（'upper'）upper:QueryList

---

您从何处获得信息：

您想要HTML字符串还是对特定组件的引用，…？如果我包装它，我应该使用\@ViewChild而不是\@ContentChild来访问它？如果被转包的内容不是另一个组件怎么办？如果您只想要

ng content

中的所有转写内容，该怎么办？

<upper #upper>my text to transform to upper case</upper>

  @ViewChildren('upper') upper: QueryList<ElementRef>

  @ContentChildren('upper') upper: QueryList<ElementRef>