angolare 2 accesso contenuto ng all'interno del componente

Question

Come accedere al "contenuto" di un componente all'interno della classe del componente stesso?

mi piacerebbe fare qualcosa di simile:

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

Come posso ottenere il contenuto o il tag superiore all'interno del mio componente come avrei usato @Input per gli attributi?

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

ps: so che potrei usare tubi per il caso di trasformazione in alto, questo è solo un esempio, io non voglio creare un componente superiore, è sufficiente sapere come accedere il contenuto del componente dalla con il componente classe.

Answer 1

Per questo è necessario utilizzare il decoratore @ContentChild.

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

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

Modifica

ho studiato un po 'di più il problema e non è possibile utilizzare @ContentChild qui da quando non si dispone di un elemento DOM interno radice.

È necessario sfruttare direttamente il DOM. Ecco una soluzione di lavoro:

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

Vai a questa plunkr per maggiori dettagli: https://plnkr.co/edit/KBxWOnyvLovboGWDGfat?p=preview

Answer 2

Se si vuole ottenere un riferimento a un componente del contenuto transclusa, è possibile utilizzare:

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

Se si avvolgono <ng-content> allora si può accedere l'accesso al contenuto transclusa come

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

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