在渲染视图/模板之前，等待Angular 2加载/解析模型

在Angular 1.x中，UI-Router是我的主要工具。通过返回对“ resolve”值的承诺，路由器只需在呈现指令之前等待承诺完成即可。

或者，在Angular 1.x中，空对象不会使模板崩溃-因此，如果我不介意暂时不完整的渲染，则可以$digest在promise.then()填充最初为空的模型对象之后使用渲染。

在这两种方法中，如果可能的话，我宁愿等待加载视图，如果无法加载资源，则取消路线导航。这为我节省了“取消导航”的工作。编辑：请注意，这特别意味着此问题要求使用Angular 2兼容或最佳实践的方法来执行此操作，并在可能的情况下要求避免使用“猫王运算符”！因此，我没有选择答案。

但是，这两种方法都无法在Angular 2.0中使用。肯定有为此计划或可用的标准解决方案。有谁知道它是什么？

@Component() {
    template: '{{cats.captchans.funniest}}'
}
export class CatsComponent {

    public cats: CatsModel;

    ngOnInit () {
        this._http.get('/api/v1/cats').subscribe(response => cats = response.json());
    }
}

以下问题可能反映了相同的问题：加载带有数据的PROMISE之后的Angular 2渲染模板。请注意，问题中没有代码或未接受的答案。

该包@angular/router具有Resolve路线的属性。因此，您可以在渲染路径视图之前轻松解析数据。

看到： https //angular.io/docs/ts/latest/api/router/index/Resolve-interface.html

截至2017年8月28日今天的文档示例：

class Backend {
  fetchTeam(id: string) {
    return 'someTeam';
  }
}

@Injectable()
class TeamResolver implements Resolve<Team> {
  constructor(private backend: Backend) {}

  resolve(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<any>|Promise<any>|any {
    return this.backend.fetchTeam(route.params.id);
  }
}

@NgModule({
  imports: [
    RouterModule.forRoot([
      {
        path: 'team/:id',
        component: TeamCmp,
        resolve: {
          team: TeamResolver
        }
      }
    ])
  ],
  providers: [TeamResolver]
})
class AppModule {}

现在，直到数据解析并返回后，您的路线才会被激活。

访问组件中的已解析数据

要在运行时从组件内部访问已解析的数据，有两种方法。因此，根据您的需要，可以使用以下任一方法：

1. route.snapshot.paramMap 它返回一个字符串，或者
2. route.paramMap这将返回一个Observable .subscribe()。

例：

  // the no-observable method
  this.dataYouResolved= this.route.snapshot.paramMap.get('id');
  // console.debug(this.licenseNumber);

  // or the observable method
  this.route.paramMap
     .subscribe((params: ParamMap) => {
        // console.log(params);
        this.dataYouResolved= params.get('id');
        return params.get('dataYouResolved');
        // return null
     });
  console.debug(this.dataYouResolved);

希望对您有所帮助。

试试{{model?.person.name}}这个应该等待模型不存在undefined然后渲染。

Angular 2将此?.语法称为Elvis运算符。在文档中很难找到它的引用，因此如果他们更改/移动它，这里是它的副本：

Elvis运算符（？。）和空属性路径

Angular“ Elvis”运算符（？。）是一种流畅而便捷的方法，可以防止属性路径中的空值和未定义值。在这里，如果currentHero为null，则可以防止视图渲染失败。

The current hero's name is {{currentHero?.firstName}}

让我们详细说明问题和此特定解决方案。

当以下数据绑定的title属性为null时，会发生什么？

The title is {{ title }}

视图仍然呈现，但是显示的值为空白；我们只会看到“标题是”，后面没有任何内容。那是合理的行为。至少该应用程序不会崩溃。

假设模板表达式包含一个属性路径，如在下一个示例中，我们显示的是空英雄的名字。

The null hero's name is {{nullHero.firstName}}

JavaScript会引发空引用错误，Angular也是如此：

TypeError: Cannot read property 'firstName' of null in [null]

更糟糕的是，整个视图消失了。

如果我们认为hero属性绝不能为null，则可以声称这是合理的行为。如果它一定不能为null却仍然为null，则我们已经犯了一个程序错误，应予以纠正。抛出异常是正确的事情。

另一方面，属性路径中的空值可能会不时出现，尤其是当我们知道数据最终会到达时。

当我们等待数据时，视图应呈现无抱怨，并且null属性路径应与title属性一样显示为空白。

不幸的是，当currentHero为null时，我们的应用程序崩溃。

我们可以使用NgIf解决这个问题

<!--No hero, div not displayed, no error --> <div *ngIf="nullHero">The null hero's name is {{nullHero.firstName}}</div>

或者，我们也可以尝试使用&&链接属性路径的各个部分，因为知道表达式遇到第一个null时就会崩溃。

The null hero's name is {{nullHero && nullHero.firstName}}

这些方法都有优点，但它们可能很麻烦，尤其是在属性路径较长的情况下。想象一下在长属性路径（如abcd）中防止空值

Angular“ Elvis”运算符（？。）是一种更流畅，更便捷的方式来防止属性路径中的空值。当表达式达到第一个空值时，表达式将失效。显示屏为空白，但应用程序不断滚动，没有错误。

<!-- No hero, no problem! --> The null hero's name is {{nullHero?.firstName}}

它也很适合长属性路径：

a?.b?.c?.d

编辑：角度小组已经发布了@Resolve装饰器。仍然需要澄清其工作方式，但是在此之前，我将在这里获取其他人的相关答案，并提供指向其他来源的链接：

• StackOverflow：在Angular2路由中使用解析
• StackOverflow：GünterZöchbauer的用法样本
• 解决文件
• GitHub上的路由器补丁
• RC4变更日志
• RC4发布推文

编辑：此答案仅适用于Angular 2 BETA。截至此编辑，尚未针对Angular 2 RC发布路由器。相反，在使用Angular 2 RC时，请router使用router-deprecated以继续使用beta路由器。

实现该目标的Angular2-future方法将通过@Resolve装饰器。在此之前CanActivate，根据布兰登·罗伯茨的说法，最接近的传真是组件装饰器。参见https://github.com/angular/angular/issues/6611

尽管beta 0不支持向组件提供解析的值，但它是已计划的，并且这里描述了一种解决方法：在Angular2路由中使用解析

您可以在此处找到Beta 1示例：http : //run.plnkr.co/BAqA98lphi4rQZAd/#/resolved。它使用了非常类似的解决方法，但使用RouteData对象而不是则更为准确RouteParams。

@CanActivate((to) => {
    return new Promise((resolve) => {
        to.routeData.data.user = { name: 'John' }

另外，请注意，还有一个用于访问嵌套/父路由“已解析”值的解决方法示例，以及使用1.x UI-Router时期望的其他功能。

请注意，由于Angular Injector层次结构目前在CanActivate装饰器中不可用，因此您还需要手动注入完成此操作所需的任何服务。只需导入一个Injector即可创建一个新的Injector实例，而无需访问的提供者bootstrap()，因此您可能需要存储整个应用程序范围内的自举Injector副本。布兰登在此页面上的第二个Plunk链接是一个很好的起点：https : //github.com/angular/angular/issues/4112

用观察者设置局部值

...此外，别忘了用虚拟数据初始化值以避免uninitialized错误。

export class ModelService {
    constructor() {
      this.mode = new Model();

      this._http.get('/api/v1/cats')
      .map(res => res.json())
      .subscribe(
        json => {
          this.model = new Model(json);
        },
        error => console.log(error);
      );
    }
}

假设Model是代表数据结构的数据模型。

没有参数的模型应创建一个具有所有初始化值（但为空）的新实例。这样，如果模板在接收数据之前渲染，则不会引发错误。

理想情况下，如果要持久保存数据以避免不必要的http请求，则应将其放在具有自己的观察者且可以订阅的对象中。

我发现一个不错的解决方案是在UI上执行以下操作：

<div *ngIf="vendorServicePricing && quantityPricing && service">
 ...Your page...
</div

只有当：vendorServicePricing，quantityPricing和service被加载的页面呈现。

实施routerOnActivate您的@Component并兑现您的承诺：

https://angular.io/docs/ts/latest/api/router/OnActivate-interface.html

编辑：这显然不起作用，尽管当前文档可能很难解释这个主题。有关更多信息，请参见此处的布兰登第一评论：https : //github.com/angular/angular/issues/6611

编辑：否则，通常是正确的Auth0网站上的相关信息不正确：https ://auth0.com/blog/2016/01/25/angular-2-series-part-4-component-router-in-深度/

编辑：角度小组正为此计划一个@Resolve装饰器。