は、ネストされたコンポーネント

Question

私はカスタム選択コントロールを思い付くしようとしている中でinnerHTMLのために静的なテキストで大丈夫働く

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

これを動作させるにはどうすればいいですか？

編集：ほとんど忘れていた、here's a plnkr問題を示しています。

Answer 1

OptionComponentにngAfterContentInitの代わりにngAfterViewInitを使用すると、ビューのバインディング{{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プロパティ、私は推測する、より良いものを使用するように眉をひそめています、OptionComponentに@Input()を使用することですが、それはあなたの質問の範囲を超えてあります。）