Angular 5：如何仅使用1条路径将出口的所有路径路由到同一个组件

发布时间：2020-12-17 07:27:45 所属栏目：安全来源：网络整理

导读：我目前的配置： const routes: Routes = [ { path: '',component: NavComponent,outlet: 'nav' },// (1) { path: '**',outlet: 'nav' } // (2)]; 有用. NavComponent始终呈现给出口导航.特别是,它适用于以下所有类型的URL： http://example.com/foo(nav:bar)

我目前的配置：

const routes: Routes = [
  { path: '',component: NavComponent,outlet: 'nav' },// (1)
  { path: '**',outlet: 'nav' } // (2)
];

有用. NavComponent始终呈现给出口导航.特别是,它适用于以下所有类型的URL：

http://example.com/foo(nav:bar)     // (a) non-empty path in nav   -->  (2)
http://example.com/foo(nav:)        // (b) empty path in nav       -->  (2)
http://example.com/foo              // (c) no nav at all           -->  (1)

请注意,路由器匹配到这些URL的不同路由：

>(1)用于(c)
>(2)用于(a)和(b)

这就是每次从(c)到(a)的位置变化时销毁并重新创建NavComponent实例的原因.这是我需要预防的事情.我需要保留我的实例,因为它的状态,动画等等.据我所知,只有在所有URL使用相同的路由时才有可能,但是我找不到这样做的方法.如果我删除(1),像(c)这样的URL就会停止在nav中显示NavComponent.显然**与这些URL不匹配(虽然我不知道为什么).

你可以在这里看到它：https://stackblitz.com/edit/angular-ptzwrm

这里有什么合适的解决方案？

现在,我是overriding UrlSerializer在解析之前添加(nav :)到像(c)这样的URL,但感觉就像一个黑客.

愚蠢的问题,但你能不能简单地使用位置服务修改URL并保持在同一个组件上(并且只是更改动画的状态)？

否则,您可以实现自定义RouteReuseStrategy以强制重用组件

import { RouteReuseStrategy } from '@angular/router';

import {ActivatedRouteSnapshot} from '@angular/router';
import { DetachedRouteHandle } from '@angular/router';


/** Use defaults from angular internals,apart from shouldReuseRoute **/


 export class CustomReuseStrategy implements RouteReuseStrategy {
    shouldDetach(route: ActivatedRouteSnapshot): boolean { return false; }
    store(route: ActivatedRouteSnapshot,detachedTree: DetachedRouteHandle): void {}
    shouldAttach(route: ActivatedRouteSnapshot): boolean { return false; }
    retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle|null { return null; }


   shouldReuseRoute(future: ActivatedRouteSnapshot,curr: ActivatedRouteSnapshot): boolean {
       let name = future.component && (<any>future.component).name;

    return future.routeConfig === curr.routeConfig || name == "NavComponent";
  }
}


@NgModule({

  providers: [

    {
      provide: RouteReuseStrategy,useClass: CustomReuseStrategy
    }]
})
export class AppModule { }

这是您修改后的stackblitz,它将始终重用您的NavComponent

https://stackblitz.com/edit/angular-tj5nrm?file=app/app.module.ts

链接

路线重用策略解释：
https://medium.com/@gerasimov.pk/how-to-reuse-rendered-component-in-angular-2-3-with-routereusestrategy-64628e1ca3eb

角度路由器策略的默认值：https://github.com/angular/angular/blob/master/packages/router/src/route_reuse_strategy.ts

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!