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钩子。它将允许您等待组件渲染，直到数据被解析（类似于Angular 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 {  }

刷新绑定上的Angular 2未定义

2 个答案: