açısal 2 bileşen içinde erişim içeriği

Question

Bileşenin "içeriği" ne, bileşen sınıfının içinden nasıl erişebilirim?

ben böyle bir şey yapmak istiyorum:

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

nasıl bileşen içindeki içeriği veya üst etiketini elde edebilirsiniz ben özellikleri için @Input kullanmak gibi?

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

ps: Ben büyük harf dönüşümü için boruları kullanabilirsiniz biliyorum bu, sadece bileşen ile gelen bileşenin içeriğe erişmek için biliyorum, bir üst bileşen oluşturmak istemiyorsanız sadece bir örnektir sınıf.

Answer 1

Bunun için @ContentChild dekoratöründen faydalanmanız gerekir.

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

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

Düzenleme biraz daha Sorununuzu araştırdık ve bunu bir kök iç DOM öğesi olmadığı için burada @ContentChild kullanmak mümkün değildir.

DOM'dan doğrudan yararlanmak gerekir.

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

fazla ayrıntı için bu plunkr bakınız: Eğer çapraz dahil içeriğin bir bileşeni bir başvuru almak istiyorsanız https://plnkr.co/edit/KBxWOnyvLovboGWDGfat?p=preview

Answer 2

, şunları kullanabilirsiniz:

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

İşte bir çalışma çözümdür

o zaman çapraz dahil içerik gibi

erişimi erişebilir <ng-content> sarın ise