Angular 5: как мне направить все пути для выхода к одному и тому же компоненту, используя только 1 маршрут?

Глупый вопрос, но не можете ли вы просто изменить 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

Я имею в виду, что вам нужен вложенный маршрутизатор-розетка. Что-то вроде этого:

app.component.html: <router-outlet></router-outlet>

feature-area.component.html: <your-navbar-component></your-navbarcomponent> <router-outlet></router-outlet>

child-of-feature-area.component.html: < h1>Hi there!</h1>

your-navbar-component.component.html: < p>some links here...</p>

Когда вы получите доступ к http://localhost:4200/feature-path/child-feature-path, вы получите:

некоторые ссылки здесь...

Привет!

Если вам нужно, я могу написать какой-нибудь плакер с примером, чтобы лучше объяснить. Но я к тому, что вы перегружаете роутер задачей, которая, может быть, и не к нему.