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

12 浏览
0 Comments

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

在Angular 1.x中，UI-Router是我主要使用的工具。通过返回一个"resolve"值的promise，路由器会在渲染指令之前等待promise完成。

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

在这两种方法中，如果可能的话，我更愿意等待加载视图，并在资源无法加载时取消路由导航。这样可以节省“取消导航”的工作。注意，这个问题特指请求一个与Angular 2未来兼容或最佳实践方法的解决方案，并要求尽可能避免使用“Elvis操作符”！因此，我没有选择那个答案。

然而，这两种方法在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());
    }
}

以下问题可能涉及到相同的问题：Angular 2 render template after the PROMISE with data is loaded。请注意，该问题中没有代码或被接受的答案。

0

3 答案

0 Comments

问题出现的原因：Angular 2在渲染视图/模板之前并未等待和解析完模型。

解决方法：使用Angular 2中的Elvis运算符（?.）来保护模型路径中的null和undefined值。通过使用Elvis运算符，可以防止视图渲染失败，直到模型不为undefined时才进行渲染。

具体来说，将模型绑定到视图时，可以使用{{model?.person.name}}。这样可以等待模型不为undefined，然后再进行渲染。

Elvis运算符是Angular 2中的一种流畅且方便的方式，用于在模型路径中防止null和undefined值引起的错误。它会在遇到第一个null值时停止运算，并且不会抛出错误。可以使用Elvis运算符来解决模型路径中的null值问题，使视图能够正常渲染。

使用Elvis运算符的示例：

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

a?.b?.c?.d

使用Elvis运算符可以保护长的模型路径，并且不会出现错误，同时保持视图的正常渲染。

此方法可以作为一种解决方案，但是有人认为更好的做法是将对象及其所有子级视为必需，并等待其可用时再进行渲染。这样做的好处是避免在每个值上都添加Elvis运算符，同时可以提高性能。

然而，Elvis运算符在某些情况下可能会有一些小问题。首先，它无法用于双向绑定，这严重限制了其在这种情况下的实用性。其次，在模板中到处使用Elvis运算符可能会让Angular团队关于静默处理错误的改变目标受到一定程度的影响。使用Elvis运算符后，模板（以及整个应用程序）在处理null值时变得更难调试。此外，如果需要根据条件选择要显示的内容，例如A:B的情况，现在还必须实现额外的ngIf逻辑。

需要注意的是，Elvis运算符现在被称为"safe navigation operator"。

因此，根据原问题中希望在模型解析完后再展示交互的要求，选择了其他答案作为解决方案。但是Elvis运算符的使用对许多其他人也非常有用。

0
0 Comments

问题出现的原因：

在Angular 2中，当模型加载或解析之前，视图/模板已经开始渲染。这可能导致渲染出的视图/模板中的数据不正确或不完整。

解决方法：

等待Angular 2加载或解析模型后再渲染视图/模板。在Angular 2中，可以通过使用resolve装饰器来实现这一点。然而，在这个问题被解决之前，可以使用CanActivate组件装饰器作为最接近的近似解决方法。

此外，还有一些解决方法可以使用。例如，在beta 0版本中，可以使用一个回调函数来提供已解析的值给组件。可以使用Promise对象来确保在数据解析完毕之前等待。

另外，需要注意的是，由于CanActivate装饰器中无法访问Angular注入器层次结构，所以需要手动注入任何需要的服务。可以通过在应用程序中存储一个全局的引导注入器来解决这个问题。

此外，还有一些其他的解决方法和功能可以在Angular 2中使用，例如访问嵌套/父路由的“resolved”值。可以在Angular 2的GitHub页面和StackOverflow上找到更多相关的解决方法和示例。

需要注意的是，解决方法可能会因为Angular版本的不同而有所变化。在这种情况下，需要根据具体的Angular版本来选择合适的解决方法。

0
0 Comments

问题出现的原因是在Angular 2中，渲染视图或模板之前，需要等待Angular 2加载或解析模型。解决方法是使用Angular的Resolve属性来解决此问题。具体方法如下：

1. 在/router包中，有一个Resolve属性可以用于路由。通过使用它，可以在渲染路由视图之前轻松解析数据。

2. 在组件中，可以通过以下两种方法访问解析后的数据：

a. 使用route.snapshot.paramMap方法，该方法返回一个字符串。

b. 使用route.paramMap方法，该方法返回一个可以进行.subscribe()订阅的Observable对象。

解决方法示例代码如下：

class Backend {
  fetchTeam(id: string) {
    return 'someTeam';
  }
}
class TeamResolver implements Resolve {
  constructor(private backend: Backend) {}
  resolve(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable|Promise|any {
    return this.backend.fetchTeam(route.params.id);
  }
}
@NgModule({
  imports: [
    RouterModule.forRoot([
      {
        path: 'team/:id',
        component: TeamCmp,
        resolve: {
          team: TeamResolver
        }
      }
    ])
  ],
  providers: [TeamResolver]
})
class AppModule {}

这样，当数据被解析和返回后，路由才会被激活。

希望这能帮到你。在组件中，你可以通过快照来访问解析后的数据。

此方法可以解决问题，但是在组件中，你如何访问解析返回的数据呢？根据stackoverflow.com/a/38313301/1138984的回答，似乎可以从快照中获取数据。

另外，需要注意的是，Resolver在应用程序的第一个路由中可能不起作用。可以参考angular.io/api/router/Resolve来了解新的语法。

0