Angular 5:防止组件在参数更改时重新加载
Angular 5: Prevent component reloading on parameter change
我有一条路线 /search
,里面有 2 个组件;一个是带有结果的搜索框,另一个是应该出现在每个页面上的新闻源,与搜索无关。如果我执行搜索,并将参数附加到 url,则结果将出现在我的搜索框下方,但在重新初始化 page/component 时,新闻源也将重新初始化,必须获取相同的数据再次(这是一项很长的 运行 任务)。
如何更新 url 以反映一个组件的状态变化,而不重新呈现页面上的另一个组件?
angularjs 曾经有 reloadOnSearch: false
可以解决这个问题,虽然是草率的
编辑: 最好将返回的结果存储在服务中,然后在路由更改时再次从服务中获取最后的结果吗?如果是这样,这将如何完成?
编辑: 因为 cgTag
已经链接到。可以使用命名的插座。我没有看到任何内容代替出口
应用-routing.module.ts
const routes: Routes = [
{ path: 'search', component: SearchComponent },
{ path: 'view', component: ClientNewsFeedComponent, outlet: 'client-news-feed' }
];
search.component.html
<div>
<cc-search-client-field></cc-search-client-field>
<router-outlet name="client-news-feed"></router-outlet>
</div>
然后浏览到 url /search(client-news-feed:view)
router-outlet 不呈现任何内容
编辑: 知道了。路由应该是
path: 'search', component: SearchComponent, children: [
{ path: 'view', component: ClientNewsFeedComponent, outlet: 'client-news-feed' }
]
和 url 应该有一个 /
/搜索/(客户端新闻提要:查看)
您可能想要使用路线的 outlet
功能。
https://angular.io/guide/router#displaying-multiple-routes-in-named-outlets
这允许您在不更改当前路线的情况下呈现次要 路线。然后,您将使用辅助路由来显示搜索结果。
我有一条路线 /search
,里面有 2 个组件;一个是带有结果的搜索框,另一个是应该出现在每个页面上的新闻源,与搜索无关。如果我执行搜索,并将参数附加到 url,则结果将出现在我的搜索框下方,但在重新初始化 page/component 时,新闻源也将重新初始化,必须获取相同的数据再次(这是一项很长的 运行 任务)。
如何更新 url 以反映一个组件的状态变化,而不重新呈现页面上的另一个组件?
angularjs 曾经有 reloadOnSearch: false
可以解决这个问题,虽然是草率的
编辑: 最好将返回的结果存储在服务中,然后在路由更改时再次从服务中获取最后的结果吗?如果是这样,这将如何完成?
编辑: 因为 cgTag
已经链接到。可以使用命名的插座。我没有看到任何内容代替出口
应用-routing.module.ts
const routes: Routes = [
{ path: 'search', component: SearchComponent },
{ path: 'view', component: ClientNewsFeedComponent, outlet: 'client-news-feed' }
];
search.component.html
<div>
<cc-search-client-field></cc-search-client-field>
<router-outlet name="client-news-feed"></router-outlet>
</div>
然后浏览到 url /search(client-news-feed:view)
router-outlet 不呈现任何内容
编辑: 知道了。路由应该是
path: 'search', component: SearchComponent, children: [
{ path: 'view', component: ClientNewsFeedComponent, outlet: 'client-news-feed' }
]
和 url 应该有一个 /
/搜索/(客户端新闻提要:查看)
您可能想要使用路线的 outlet
功能。
https://angular.io/guide/router#displaying-multiple-routes-in-named-outlets
这允许您在不更改当前路线的情况下呈现次要 路线。然后,您将使用辅助路由来显示搜索结果。