Угловое 2 при обновлении связывания неопределен

Question

ApplicationComponent:

@RouteConfig([ 
    {path:'/', name: 'Dashboard', component: DashboardComponent, useAsDefault: true}, 
    {path:'/model/:id', name: 'ModelDetail', component: ModelDetailComponent}, 
]) 

Посетитель непосредственно по адресу: http://localhost:8080/model/4

Прежде чем мы сможем оказать "ModelDetailComponent", нам нужно загрузить все модели внутри класса ngOnInit() ,

ngOnInit() { 
    let id = parseInt(this.routeParams.get('id')); 
    this.modelService.subject$.subscribe(models => { 
     if (models.length > 0) { 
     this.model = models[0]; 
     } 
    }) 
    this.modelService.getModel(id); 
    } 

шаблон:

<h1>{{model.name}}</h1> 
<model-list [model]="model"></model-list> //nested compnent that also use the model. 

недвижимости

public model:IModel; 

Answer 1

Я думаю, что вы ищете является CanActivate крючком. Это позволит вам ждать рендеринга компонентов до тех пор, пока не будут решены данные (аналогично функции разрешения углового 1.x).

Для получения более подробной информации см. this.

Answer 2

Просто используйте

<h1>{{model?.name}}</h1> 

(добавлено ?), то это не имеет значения, что данные поступают позже.

Если у вас есть много таких привязок может быть проще, чтобы обернуть весь шаблон *ngIf

@Component({ 
    selector: 'my-component', 
    template' ` 
    <div *ngIf="model"> 
     <h1>{{model.name}}</h1>`}) 
    <div> 
class MyComponent { }