truy cập góc 2 truy cập ng-content trong thành phần

Question

Làm cách nào để truy cập "nội dung" của một thành phần từ bên trong lớp thành phần?

Tôi muốn làm điều gì đó như thế này:

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

Làm thế nào tôi có thể nhận được nội dung hoặc thẻ phổ thông trong thành phần của tôi như tôi sẽ sử dụng @Input cho các thuộc tính?

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

ps: Tôi biết tôi có thể sử dụng ống cho việc chuyển đổi chữ hoa, đây chỉ là một ví dụ, tôi không muốn tạo ra một thành phần trên, chỉ biết làm thế nào để truy cập vào nội dung của thành phần từ các thành phần lớp học.

Answer 1

Bạn cần tận dụng bộ trang trí @ContentChild cho việc này.

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

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

Sửa

tôi điều tra một chút vấn đề của bạn và nó không thể sử dụng @ContentChild đây kể từ khi bạn không có một phần tử DOM bên trong thư mục gốc.

Bạn cần tận dụng DOM trực tiếp. Đây là một giải pháp làm việc:

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

Xem plunkr này để biết thêm chi tiết: https://plnkr.co/edit/KBxWOnyvLovboGWDGfat?p=preview

Answer 2

Nếu bạn muốn nhận được một tham chiếu đến một thành phần của nội dung nhúng, bạn có thể sử dụng:

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

Nếu bạn quấn <ng-content> thì bạn có thể truy cập vào nội dung được nhúng chéo như

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

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