Javascript angular 2 访问组件内的 ng-content
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/36545478/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
angular 2 access ng-content within component
提问by Daniel Kobler
How can I access the "content" of a component from within the component class itself?
如何从组件类本身访问组件的“内容”？
I would like to do something like this:
我想做这样的事情：
<upper>my text to transform to upper case</upper>
How can I get the content or the upper tag within my component like I would use @Inputfor attributes?
如何像@Input用于属性一样获取组件中的内容或上层标记？
@Component({
selector: 'upper',
template: `<ng-content></ng-content>`
})
export class UpperComponent {
@Input
content: String;
}
PS: I know I could use pipes for the upper case transformation, this is only an example, I don't want to create an upper component, just know how to access the component's content from with the component class.
PS：我知道我可以使用管道进行大写转换，这只是一个例子，我不想创建一个大写组件，只知道如何从组件类访问组件的内容。
采纳答案by Thierry Templier
You need to leverage the @ContentChilddecorator for this.
@ContentChild为此，您需要利用装饰器。
@Component({
selector: 'upper',
template: `<ng-content></ng-content>`
})
export class UpperComponent {
@Input
content: String;
@ContentChild(...)
element: any;
}
Edit
编辑
I investigated a bit more your issue and it's not possible to use @ContentChildhere since you don't have a root inner DOM element.
我对您的问题进行了更多调查@ContentChild，由于您没有根内部 DOM 元素，因此无法在此处使用。
You need to leverage the DOM directly. Here is a working solution:
您需要直接利用 DOM。这是一个有效的解决方案：
@Component({
selector: 'upper',
template: `<ng-content></ng-content>`
})
export class UpperComponent {
constructor(private elt:ElementRef, private renderer:Renderer) {
}
ngAfterViewInit() {
var textNode = this.elt.nativeElement.childNodes[0];
var textInput = textNode.nodeValue;
this.renderer.setText(textNode, textInput.toUpperCase());
}
}
See this plunkr for more details: https://plnkr.co/edit/KBxWOnyvLovboGWDGfat?p=preview
有关更多详细信息，请参阅此 plunkr：https://plnkr.co/edit/KBxWOnyvLovboGWDGfat?p =preview
回答by Günter Z?chbauer
If you want to get a reference to a component of the transcluded content, you can use:
如果要获取对嵌入内容的组件的引用，可以使用：
@Component({
selector: 'upper',
template: `<ng-content></ng-content>`
})
export class UpperComponent {
@ContentChild(SomeComponent) content: SomeComponent;
}
If you wrap <ng-content>then you can access access to the transcluded content like
如果您包装，<ng-content>那么您可以访问对嵌入内容的访问，例如
@Component({
selector: 'upper',
template: `
<div #contentWrapper>
<ng-content></ng-content>
</div>`
})
export class UpperComponent {
@ViewChild('contentWrapper') content: ElementRef;
ngAfterViewInit() {
console.debug(this.content.nativeElement);
}
}
回答by alansiqueira27
class SomeDir implements AfterContentInit {
@ContentChildren(ChildDirective) contentChildren : QueryList<ChildDirective>;
ngAfterContentInit() {
// contentChildren is set
}
}
Note that if you do console.log(contentChildren), it will only work on ngAfterContentInitor a later event.
请注意，如果您执行 console.log(contentChildren)，它将仅适用于ngAfterContentInit或更高版本的事件。
