尽管 RouterLink 导入，Angular Ionic 应用程序 RouterLink 仍无法正常工作答案

【问题标题】：Angular Ionic app RouterLink not working despite RouterLink imports尽管 RouterLink 导入，Angular Ionic 应用程序 RouterLink 仍无法正常工作
【发布时间】：2020-06-20 04:11:46
【问题描述】：

我有一个使用离子角度标签模板设置的应用程序。无论出于何种原因，我都无法使用 RouterLink 进行导航。当我单击我提供了 RouterLink 属性的元素时，没有任何反应。我搜索了几个小时并看到了与此处相同的建议：RouterLink not working in child components

我实际上已经在我所有页面的导入中添加了 RouterLink，但仍然没有运气。使用 angular ionic 标签模板，我将从标签页转到嵌套的详细信息页。标签页成功使用 RouterLink 导航到我的详细信息页面。但是在我的详细信息页面中，我无法设置链接或按钮来使用 RouterLink 导航到另一条路线。当我单击按钮时，没有任何反应。我错过了什么？

DetailPage - html

<ion-card>
  <ion-card-header>
    <ion-card-title>Bla</ion-card-title>
  </ion-card-header>
  <ion-card-content>
    <a [routerLink]="['/bla/1']">
      More...
    </a>
  </ion-card-content>
</ion-card>

detail-routing-module.ts

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

import { DetailPage } from './detail.page';

const routes: Routes = [
  {
    path: '',
    component: DetailPage
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes),
    RouterModule 
  ],
  exports: [RouterModule],
})
export class DetailPageRoutingModule {}

detail.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';

import { IonicModule } from '@ionic/angular';

import { DetailPageRoutingModule } from './detail-routing.module';

import { DetailPage } from './detail.page';
import { RouterModule } from '@angular/router';

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    DetailPageRoutingModule,
    RouterModule 
  ],
  declarations: [DetailPage]
})
export class DetailPageModule {}

【问题讨论】：

实际定义的路线应该带你到 ['/bla/1'] ？另外，您是否尝试过启用跟踪以查看路由器日志？ RouterModule.forRoot(路由，{ enableTracing:true })。以 '/' 开头的路由将查找从根目录开始的路由。这是你的意图吗？

标签： angular ionic4 angular-router

【解决方案1】：

所以事实证明我的问题是我的模块没有被加载。

出现 RouterLink 问题的页面 (DetailPage.html) 正在从另一个页面路由到：

{
   path: 'detail/:competitionId',
   component: DetailPage,
},

将上面的内容更改为下面的内容可以解决问题：

  {
    path: 'detail/:competitionId',
    loadChildren: () => import('./detail/detail.module').then( m => m.DetailPageModule)
  },

【讨论】：