标签: angular-router

我们刚刚将我们的项目从 Angular 6 升级到 Angular 7，并注意到以下问题，即在组件被销毁之前发出 NavigationEnd 事件。在升级到 Angular 7 之前，我们看到 NavigationEnd 事件在组件被销毁后发出。

WidgetContainerComponent 的每个实例都订阅了 ngOnInit 中可观察的配置，而 ngOnDestroy 将取消订阅它。

  constructor(@SkipSelf() private dataProviderDirective: DataProviderDirective) {
    super();
  }

  ngOnInit(): void {
    console.log("WidgetContainer.ngOnInit called");
    const _self = this;
    this.dataProviderDirective.getConfigurationPublisher().subscribe(widgetConfigurations => {
      _self.processConfiguration(widgetConfigurations, this.alias);
      this.subscribe(this.wsDataTopic + this.configuration.id, (message: Message) => this.onDataTopic(message));
      this.subscribe(this.wsStaleTopic + this.configuration.id, (message: Message) => this.onStaleTopic(message));
    });
  }

  ngOnDestroy(): void {
    console.log("WidgetContainer.ngOnDestroy() called");
  }

包含这些组件的另一个组件 (DashboardContainerComponent) 具有以下内容：

  navigationSubscription;

  constructor(@Host() private dashboardComponent: DashboardComponent, private router:Router) {
    super();
    this.navigationSubscription = this.router.events.subscribe((e: any) => { …

我想在整个应用程序中集中读取特定查询字符串参数的位置/方式，因此我认为最好的位置是在 app.component.ts 中

export class AppComponent implements OnInit, OnDestroy {
  constructor(
    private router: Router,
    private activatedRoute: ActivatedRoute) {
  }

然后，在ngOnInit()，我查看快照以及不同的订阅：

  ngOnInit(): void {
    console.log('AppComponent - ngOnInit() -- Snapshot Params: ' + this.activatedRoute.snapshot.params['code']);
    console.log('AppComponent - ngOnInit() -- Snapshot Query Params: ' + this.activatedRoute.snapshot.queryParams['code']);
    console.log('AppComponent - ngOnInit() -- Snapshot Query ParamMap: ' + this.activatedRoute.snapshot.queryParamMap.get('code'));

    this.activatedRouteParamsSubscription = this.activatedRoute.params.subscribe(params => {
      console.log('AppComponent - ngOnInit() -- Subscription Params: ' + params['code']);
    });

    this.activatedRouteQueryParamsSubscription = this.activatedRoute.queryParams.subscribe(params => {
      console.log('AppComponent - ngOnInit() -- Subscription Query …

我需要有关我无法解决的问题的帮助。我正在研究 angular 7 库，以便为我的应用程序添加模块化，但是在应用程序中安装它时，库中定义的模块路由似乎不起作用。

我已经创建项目到 github 来重现问题：
Library test foo-lib
External Application foo-tester

在每个自述文件中，我都描述了如何重现此问题。

我创建了一个示例库 (foo-lib)，其路由模块定义了子路由，然后我在同一工作区中的一个简单应用程序中构建并测试了它。一切正常，并且库路由已正确添加到测试应用程序中。在下一步中，我导出了构建的库，并通过 npm link 命令将其包含在另一个工作区中的另一个应用程序示例中，并在此应用程序上运行了 ng serve 命令。使用此配置，如果尝试实现库路由路径，我会收到一个错误，就好像它们没有添加到主路由模块中一样。

Foo-lib-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { MainComponent } from './components/main/main.component';
import { NewFooCmpComponent } from './components/new-foo-cmp/new-foo-cmp.component';

const UP_ROUTES: Routes = [
  { path: 'main_path',  component: MainComponent,
    children: [
      { path: 'child', component: NewFooCmpComponent }
    ]
  }
];

@NgModule({
  imports: [RouterModule.forChild(UP_ROUTES)],
  exports: [RouterModule]
})

export class FooLibRoutingModule { } …

是否可以向NavigationExtras路由器提供全局？

skipLocationChange每当我导航到我的应用程序中的不同页面时，我都必须使用。我目前在模板中添加此选项：

<a routerLink="settings" skipLocationChange>Settings</a>

或在组件中：

this.router.navigate(['settings'], { skipLocationChange: true });

我能否以某种方式定义由 AngularNavigationExtras自动添加到所有navigate操作的全局默认值，以便我不必手动将它们添加到模板中的每个链接或router.navigate(..)组件中的每个调用？

无法通过 Angular.Router.navigate 使用 queryParams 导航到子路由

?已经尝试过：

this.router.navigateByUrl('/desktop/search?q=folder'));

this.router.navigate(['desktop', 'search'], { queryParams: {q: 'folder'} });

this.router.navigate(['desktop/search'], { queryParams: {q: 'folder'} });

我的路线：

{
    path: 'desktop',
    component: FavoritesPageComponent,
    children: [
      { path: 'desktop-admin', component: DesktopAdminComponent },
      { path: 'favorites', component: FavoritesBodyMainComponent },
      { path: 'sessions', component: SessionsComponent },
      { path: 'search', component: FavoritesBodySearchComponent },
      { path: 'shared_with_me', component: FavoritesBodySharedComponent },
      { path: 'recycle', component: FavoritesBodyRecycleComponent } 
    ] 
}

当我尝试导航到“桌面/搜索？q=文件夹”时，出现以下错误：

ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'desktop/search%3Bq%3D%25D0%25BF%25D0%25B0%25D0%25BF%25D0%25BA%25D0%25B0' …

我有这个路由配置并且它完美地工作，只有一件事让我烦恼：即使导航应用程序有效，当我转到地址栏并按回车键时，它会将我重定向到 /dashboard，即使我不更改 url 和点击进入。

这是我的路由配置：

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

import { FullComponent } from './layouts/full/full.component';

export const Approutes: Routes = [
  {
    path: '',
    component: FullComponent,
    children: [
      {
        path: 'usuarios',
        loadChildren: './pages/usuarios/usuarios.module#UsuariosModule'
      },
      {
        path: 'autores',
        loadChildren: './pages/autores/autores.module#AutoresModule'
      },
      {
        path: 'conteudos',
        loadChildren: './pages/conteudos/conteudos.module#ConteudosModule'
      },
      {
        path: 'projetos',
        loadChildren: './pages/projetos/projetos.module#ProjetosModule'
      },
      {
        path: 'dashboard',
        loadChildren: './pages/dashboard/dashboard.module#DashboardModule'
      },
    ]
  },
  {
    path: 'login',
    loadChildren: './pages/login/login.module#LoginModule'
  },
  {
    path: '',
    redirectTo: '/dashboard',
    pathMatch: 'full'
  }
];

我注意到的另一件事是，当我按下 Enter 键并查看我的网络时，我可以看到该页面的解析器被调用，但随后我被重定向到 …

我正在用 angular 做一个小测试项目，我想包含一个使用 angular router outlet 的侧面导航。我希望有两个链接：

<a class="nav-link text-white" [routerLink]='["/link/to/one"]' routerLinkActive="aLink" [routerLinkActiveOptions]="{ exact: true }">Component 1</a>
<a class="nav-link text-white" [routerLink]='["/another/link/to/component"]' routerLinkActive="aLink" [routerLinkActiveOptions]="{ exact: true }">Component 2</a>

可以从其中一个组件导航到几个子页面。但它们不需要显示为路由器链接。

所以我网站的结构可以是例如：

|-Comopnent 1
|
|-Component 2
   |- Component 3 
   |- Component 4 

所以我希望用户能够通过路由器链接导航到 Component2。从这个组件，用户可以通过代码重定向到组件 3 和 4。但我不希望他们有额外的路由器链接，我希望导航菜单中仍然突出显示 component2。

在我的 app.module.ts 中，我基本上声明了路由：

RouterModule.forRoot([
  { path: '', component: HomeComponent, pathMatch: 'full'},
  { path: '/link/to/one', component: Component1 },
  { path: '/another/link/to/component', component: Component2 },
])

如何从 Component2 中调用 Component3 & 4，并让路由器在导航栏中突出显示 Component2？

问候

此问题与 SO 上的以下现有问题重复：

角度路由器：如何替换参数？

一般替换 Angular 2 路由参数并导航

Angular 6 router - 替换当前路由的部分参数

Angular2-router：如何只更改路由的参数？

如何在 Angular2 中更改特定的内部路由参数

这些问题的答案都没有完全解决替换 url 中的一个段的问题，因此我再次提出这个问题。

总结一下我的情况：

这些是我项目中的一些路线（我自己没有想出这个，所以请多多包涵）

/:customer/static/part/of/url
/:customer/other/static/stuff
/something/for/the/:customer
/something/without/anything
/other/stuff/:customer/might/need

参数 ":customer" 出现在 url 的不同位置。我的问题是这个客户 ID 可能会在后端更改，而无需前端的任何操作。我正在监听后端的变化，并且必须相应地调整 url，以防客户 ID 发生变化。

简单的 string.replace 行不通，因为从技术上讲，客户 ID 可能实际上和字面上是“静态”或“其他”。

题：

如何分析当前 url (ActivatedRoute?) 以仅替换与客户 id 相关的 url 的一部分（paramMap 具有“customer”），同时保持 url 的其余部分原样？

我有一个使用 ionic 3 开发的项目。但是我休息了一下，当我再次开始使用 ionic 时，我看到新版本中导航系统发生了变化。我的项目是一个简单的项目。该项目列出了数组中的数据以及有关数据的详细信息显示在不同的页面上。

我是在 Ionic 3 上做这个的： homepage.ts

 export class HomePage  {

  items = [];

    constructor(public navCtrl: NavController) {
      this.initializeItems();}
      initializeItems() {
      this.items = [
   {
    'title': 'John',
    'image': '',
    'hair': 'black',
  },
   {
    'title': 'Brendon',
    'image': '',
    'hair': 'blonde',
  }];

openNavDetailsPage(item) {
    this.navCtrl.push(DetailsPage, { item: item });
  }

详情页.ts

 export class DetailsPage {
   item;

   constructor(params: NavParams) {
     this.item = params.data.item;
   }
 }

NavCtrl 和 NavParams 在版本 5 中不再可用（我认为在版本 4 中）。我确实从主页导航到下一页（ionic 5）。 主页.ts：

    toDetailsPage(){
      this.router.navigate(['details'])
    }

但是，我无法根据列表中的数据进行导航。我怎样才能根据下一代版本做到这一点？

我有一个 angular 项目，它有多个路由，/category/fruit/apple所以完整的 url 是http://myserver/category/fruit/apple通过路由器链接的，一切都很好，但是如果我直接在输入 URL 时打开这个链接，那么404我的后端是带有 express 的 nodejs。404 是有意义的，因为没有像这样配置的路由。

我的问题，在这种情况下我应该如何处理？

我以为我有，重定向到根http://myserver?path=category-fruit-apple并从根组件进行动态路由。这是正确的方法吗？

请建议最好的方法。