kątowy 2 dostęp do zawartości w komponencie

Question

Jak uzyskać dostęp do "zawartości" komponentu z samej klasy komponentu?

chciałbym zrobić coś takiego:

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

Jak mogę uzyskać zawartość lub górny znacznik w moim komponentu jak użyłbym @Input dla atrybutów?

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

PS: Wiem, że mógłbym użyć rur dla górnej transformacji przypadku jest to tylko przykład, nie chcę, aby utworzyć górny element, po prostu wiem, jak uzyskać dostęp do zawartości składnika z ze składnikiem klasa.

Answer 1

Do tego celu należy zastosować dekorator @ContentChild.

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

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

Edit

badałem nieco więcej problemu i nie jest możliwe zastosowanie @ContentChild tutaj, ponieważ nie mają korzenia wewnętrzny element DOM.

Musisz bezpośrednio wykorzystać DOM. Tutaj jest roztwór roboczy:

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

Zobacz ten plunkr Szczegółowe informacje: https://plnkr.co/edit/KBxWOnyvLovboGWDGfat?p=preview

Answer 2

Jeśli chcesz uzyskać odwołanie do komponentu dołączany treści, można użyć:

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

Jeśli otoczysz <ng-content>, uzyskasz dostęp do zawartości zawartej w translatach, takiej jak

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

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