angular 2访问组件内的ng-content

Question

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

我愿做这样的事情：

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

我怎样才能得到我的组件中的内容或上标签像我会用@input的属性？

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

PS：我知道我可以使用管道为大写转型，这只是一个例子，我不想创建一个上部部件，只知道如何从与组件访问组件的内容类。

Answer 1

你需要利用@ContentChild装饰这个。

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

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

编辑

我研究多一点您的问题，这是不可能的使用@ContentChild在这里，因为你没有根内DOM元素。

您需要直接利用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()); 
    } 
} 

请参阅本plunkr了解更多详情：https://plnkr.co/edit/KBxWOnyvLovboGWDGfat?p=preview

Answer 2

如果你想要去的transcluded内容的组件的引用，你可以使用：

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

如果你换行<ng-content>那么你可以访问transcluded内容，如

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

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