angle2-universal-starterの動的コンポーネントローダーでデータバインディングが機能しない

Question

angular2-universal-starterプロジェクトを使用しています。

私は@Inputを使って子コンポーネントにオブジェクトを渡そうとしましたが、正しく動作しませんでした。

私は子コンポーネントをロードするために動的コンポーネントローダーを使用しています。子コンポーネントにオブジェクトを渡したいと思います。続き

は私のコードスニペットです：

app.component.ts

import {Component, Directive, Renderer, DynamicComponentLoader, ElementRef} from 'angular2/core'; 
import {Http} from 'angular2/http';  
import {headingComponent} from './heading.component'; 
@Directive({ 
    selector: '[x-large]' 
}) 
export class XLarge { 
    constructor(element: ElementRef, renderer: Renderer) { 
    // we must interact with the dom through Renderer for webworker/server to see the changes 
    renderer.setElementStyle(element.nativeElement, 'fontSize', 'x-large'); 
    } 
} 
@Component({ 
    selector: 'app', 
    directives: [  
    XLarge 
    ], 
    template: ` 
    <div> 
     <div> 
     <span x-large>Hello, {{ user.name }}!</span> 
     </div> 
     <icici-heading [user]="user"></icici-heading>  
    </div> 
` 
}) 
export class App { 
    public user;  
    constructor(dcl: DynamicComponentLoader, elementRef: ElementRef) {   
     dcl.loadNextToLocation(headingComponent, elementRef); 
    } 
    ngOnInit(){ 
     this.user = { "id": 11, "name": "Mr. Nice" }; 
    } 
} 

heading.component.ts

import {Component, OnInit,Input} from 'angular2/core'; 

@Component({ 
    selector: 'icici-heading', 
    template: ` 
     <div> 
     <!--{{user.name}}-->this is not working 
     {{name}} 
     </div> 
` 
}) 

export class headingComponent implements OnInit { 
    @Input() user; 
    name: string; 
    constructor() { } 
    ngOnInit() { 
     this.name="heading is rendered"; 
    }  
} 

Answer 1

私はあなたがちょうどあなたをする必要があると思います値がまだ利用可能でないときには、より寛容なコードを書いてください。

これは動作します：動的に追加されたコンポーネントについてはときuser != null

{{user?.name}} 

をエルビスや安全なナビゲーション演算子のみ.nameを評価あなたも値を渡す必要が命令的

dcl.loadNextToLocation(headingComponent, elementRef) 
.then(cmpRef => cmpRef.instance.user = this.user);