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); 
    } 
}