Angular 如何实现嵌套解析器
Angular How to implement nested resolvers
我有一个组件使用解析器获取类别:
ngOnInit() {
this.category = this.route.snapshot.data['category'];
}
所以这很好用并且得到了类别,它本质上是一个用户列表。
在从上述解析器获得用户名列表后,我在 ngOnInit() 中手动获取了用户帐户详细信息,但是当我将它们作为 Input() 传递给子组件时,它们没有尚未加载,
这会导致抛出以下错误,这是有道理的。
CategoryItemComponent.html:4 ERROR TypeError: Cannot read property 'id' of undefined
at Object.eval [as updateRenderer] (CategoryItemComponent.html:4)
at Object.debugUpdateRenderer [as updateRenderer] (core.js:11940)
at checkAndUpdateView (core.js:11312)
at callViewAction (core.js:11548)
at execComponentViewsAction (core.js:11490)
at checkAndUpdateView (core.js:11313)
at callViewAction (core.js:11548)
at execEmbeddedViewsAction (core.js:11511)
at checkAndUpdateView (core.js:11308)
at callViewAction (core.js:11548)
at execComponentViewsAction (core.js:11490)
at checkAndUpdateView (core.js:11313)
at callViewAction (core.js:11548)
at execEmbeddedViewsAction (core.js:11511)
at checkAndUpdateView (core.js:11308)
at callViewAction (core.js:11548)
我的问题是:我可以使用来自第一个解析器的这个用户列表作为第二个解析器的输入吗?如果是这样,这到底是怎么做到的?
编辑 1:
我目前将下载的用户从 ngOnInit() 提供给子组件,如下所示:
<app-account [account]="account"></app-account>
我知道我可以按照@alokstar 的回答去做,但我想知道这是否是推荐的方式 - 或者是否有更优雅的嵌套解析器的方式。
因此,如果需要此输入来加载子组件,那么您可以考虑在加载之前为您的子组件设置条件,例如:
<child-component *ngIf = 'dataAvailable'>
</child-component>
或者,如果即使输入未定义或不可用,您也想加载子组件,您可以在子组件中添加防御条件,以避免 'undefined' 类错误。
我有一个组件使用解析器获取类别:
ngOnInit() {
this.category = this.route.snapshot.data['category'];
}
所以这很好用并且得到了类别,它本质上是一个用户列表。
在从上述解析器获得用户名列表后,我在 ngOnInit() 中手动获取了用户帐户详细信息,但是当我将它们作为 Input() 传递给子组件时,它们没有尚未加载,
这会导致抛出以下错误,这是有道理的。
CategoryItemComponent.html:4 ERROR TypeError: Cannot read property 'id' of undefined
at Object.eval [as updateRenderer] (CategoryItemComponent.html:4)
at Object.debugUpdateRenderer [as updateRenderer] (core.js:11940)
at checkAndUpdateView (core.js:11312)
at callViewAction (core.js:11548)
at execComponentViewsAction (core.js:11490)
at checkAndUpdateView (core.js:11313)
at callViewAction (core.js:11548)
at execEmbeddedViewsAction (core.js:11511)
at checkAndUpdateView (core.js:11308)
at callViewAction (core.js:11548)
at execComponentViewsAction (core.js:11490)
at checkAndUpdateView (core.js:11313)
at callViewAction (core.js:11548)
at execEmbeddedViewsAction (core.js:11511)
at checkAndUpdateView (core.js:11308)
at callViewAction (core.js:11548)
我的问题是:我可以使用来自第一个解析器的这个用户列表作为第二个解析器的输入吗?如果是这样,这到底是怎么做到的?
编辑 1:
我目前将下载的用户从 ngOnInit() 提供给子组件,如下所示:
<app-account [account]="account"></app-account>
我知道我可以按照@alokstar 的回答去做,但我想知道这是否是推荐的方式 - 或者是否有更优雅的嵌套解析器的方式。
因此,如果需要此输入来加载子组件,那么您可以考虑在加载之前为您的子组件设置条件,例如:
<child-component *ngIf = 'dataAvailable'>
</child-component>
或者,如果即使输入未定义或不可用,您也想加载子组件,您可以在子组件中添加防御条件,以避免 'undefined' 类错误。