如何解决角度4中的应用程序级数据?

时间:2017-07-14 23:49:34

标签: angular

假设我有一个应为所有网址加载的全局配置。

例如:

/
/users
/users/abc

我可以手动将解析器逐个添加到所有URL,但在这种情况下,我必须从捕获路由数据的每个组件更新全局配置,对吧?有没有更好的方法来处理这个?

我们说我们有多个模块:

App Module
/login
/sign-up

User Module
/user/list
/user/:id

Product Module
/product/list
/product/:id

@DeborahK的解决方案我们仍然需要为每个模块的根路径添加解析器,我可以说这肯定会有效。但有没有办法在一个地方申请一次?

3 个答案:

答案 0 :(得分:2)

如果您有父路线和子路线,您可以在父路线上设置解析器并在子路径中使用它。我在这里有一个例子:https://github.com/DeborahK/Angular-Routing/tree/master/APM-Final

我的父母和子女路线看起来像这样。请注意,解析器仅在父级上。

  {
    path: ':id/edit',
    component: ProductEditComponent,
    resolve: { product: ProductResolver },
    canDeactivate: [ProductEditGuard],
    children: [
      {
        path: '',
        redirectTo: 'info',
        pathMatch: 'full'
      },
      {
        path: 'info',
        component: ProductEditInfoComponent
      },
      {
        path: 'tags',
        component: ProductEditTagsComponent
      }
    ]
  }

然后你可以像这样从孩子那里读取解析器数据:

ngOnInit(): void {
        this.route.parent.data.subscribe(data => {
            this.product = data['product'];

            if (this.productForm) {
                this.productForm.reset();
            }
        });
    }

我正在观看更改,所以订阅了。如果您不需要观察更改,可以使用快照。

答案 1 :(得分:0)

我也试图在这里找到角度4的最佳方法,从我的测试中看来

a)您无法将解析程序置于顶层,即如果您有多个要素模块,则解析不会级联。

b)将解析器放在需要数据的每个要素模块的根目录上会导致解析程序不必要地运行(例如,每次在各个要素模块的组件之间来回导航)。

所以我认为解析器似乎不适合应用程序范围的数据加载,并且最好探索其他技术,例如APP_INITIALIZER或将某些内容注入引导程序的方法(例如,这看起来很有趣:angular2 bootstrap with data from ajax call(s) )。有兴趣知道其他人认为最适合的。祝你好运,如果你发现任何有趣的事情请更新。

答案 2 :(得分:0)

我已经通过使用APP_INITIALIZER注入令牌的示例回答了相同的问题over here