在渲染视图/模板之前等待 Angular 2 加载/解析模型 [英] Wait for Angular 2 to load/resolve model before rendering view/template

问题描述

在 Angular 1.x 中，UI-Router 是我的主要工具.通过返回解析"值的承诺，路由器将在呈现指令之前简单地等待承诺完成.

In Angular 1.x, UI-Router was my primary tool for this. By returning a promise for "resolve" values, the router would simply wait for the promise to complete before rendering directives.

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

Alternately, in Angular 1.x, a null object will not crash a template - so if I don't mind a temporarily incomplete render, I can just use $digest to render after the promise.then() populates an initially empty model object.

在这两种方法中，如果可能的话，我更愿意等待加载视图，如果无法加载资源，则取消路由导航.这节省了我取消导航"的工作.请注意，这特别意味着此问题要求使用与 Angular 2 期货兼容或最佳实践的方法来执行此操作，并要求尽可能避免使用猫王操作员"！因此，我没有选择那个答案.

Of the two approaches, if possible I'd prefer to wait to load the view, and cancel route navigation if the resource cannot be loaded. This saves me the work of "un-navigating". Note this specifically means this question requests an Angular 2 futures-compatible or best-practice method to do this, and asks to avoid the "Elvis operator" if possible! Thus, I did not select that answer.

然而，这两种方法都不适用于 Angular 2.0.当然，有一个标准的解决方案计划或可用于此.有人知道是什么吗?

However, neither of these two methods work in Angular 2.0. Surely there is a standard solution planned or available for this. Does anyone know what it is?

@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 渲染模板.请注意，该问题中没有代码或已接受的答案.

The following question may reflect the same issue: Angular 2 render template after the PROMISE with data is loaded . Note that question has no code or accepted answer in it.

推荐答案

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

The package @angular/router has the Resolve property for routes. So you can easily resolve data before rendering a route view.

参见:https://angular.io/docs/ts/latest/api/router/index/Resolve-interface.html

截至 2017 年 8 月 28 日的文档示例:

Example from docs as of today, August 28, 2017:

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 {}

现在您的路由将不会被激活，直到数据被解析并返回.

Now your route will not be activated until the data has been resolved and returned.

访问组件中已解析的数据

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

To access the resolved data from within your component at runtime, there are two methods. So depending on your needs, you can use either:

1. route.snapshot.paramMap 返回一个字符串，或者
2. route.paramMap 返回一个 Observable，你可以 .subscribe() 到.

1. route.snapshot.paramMap which returns a string, or the
2. route.paramMap which returns an Observable you can .subscribe() to.

示例:

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

希望能帮到你.

这篇关于在渲染视图/模板之前等待 Angular 2 加载/解析模型的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！