Binding не работает innerHTML в вложенной компоненте

Question

Я пытаюсь придумать пользовательский выбор управления,

<my-select> 
    <my-option>Option 1</my-option> 
    <my-option>Option 2</my-option> 
    ... 
</my-select> 

, который работает хорошо со статическим текстом. Однако, если я ввожу привязок

<my-select> 
    <my-option *ngFor="let option of options">{{option}}</my-option> 
</my-select> 

{{option}} всегда делает, как пустую строку (если я заменю {{option}} с, скажем, test потом все снова работает). Вот мои компоненты:

@Component({ 
    selector: 'my-select', 
    template: ` 
    <ul> 
     <li *ngFor="let option of options"> 
     {{option.text}} 
     </li> 
    </ul> 
    ` 
}) 
export class SelectComponent { 
    options: OptionComponent[] = []; 
    addOption(option): OptionComponent { 
    this.options.push(option); 
    } 
} 

@Component({ 
    selector: 'my-option', 
    template: ` 
    <div #wrapper> 
     <ng-content></ng-content> 
    </div> 
    `, 
    directives: [] 
}) 
export class OptionComponent implements AfterContentInit { 
    @ViewChild('wrapper') wrapper: ElementRef; 
    text: string; 
    constructor(private select: SelectComponent) { } 
    ngAfterContentInit() { 
     let text = this.wrapper.nativeElement.innerHTML; 
     this.text = text ? text : 'EMPTY'; 
     this.select.addOption(this); 
    } 
} 

Как я могу заставить это работать?

EDIT: почти забыл, here's a plnkr показывая проблему.

Answer 1

Вы должны использовать ngAfterViewInit вместо ngAfterContentInit в вашем OptionComponent перед связыванием зрения, {{option}}, сделано.

export class OptionComponent implements AfterViewInit { 
    @ViewChild('wrapper') 
    wrapper: ElementRef; 
    text: string; 
    constructor(private select: SelectComponent) { } 
    ngAfterViewInit() { 
     let text = this.wrapper.nativeElement.innerHTML; 
     this.text = text ? text : 'EMPTY'; 
     this.select.addOption(this); 
    } 
} 

plunker

это довольно неодобрительно использовать nativeElement недвижимость, А лучше, что я думаю, было бы использовать @Input() на OptionComponent, но это выходит за рамки вашего вопроса;)