angular 惰性路由问题

Question

我是 angular 的新手，我在谷歌上搜索了几个小时以找到懒惰路线的解决方案。
https://stackblitz.com/edit/angular-7jmk87

app-routing.module.ts

const routes: Routes = [
  { path: '', redirectTo: 'home', pathMatch: 'full' },
  { path: 'home', component: HomeComponent},
  { path: 'customers', loadChildren: './pages/customers/customers.module#CustomersModule' }
];

客户-routing.module.ts

const routes: Routes = [
    { 
      path: '', 
      component: CustomersComponent, 
    },
    { path: 'detail', component: CustomerDetailComponent },
];

我想要的是从 /customers 重定向到 /customers/detail，但它 return 是一个像 Cannot match any routes. URL Segment: 'detail' 这样的错误。
我遵循了一些示例，但仍未解决。
我希望有人能帮帮我。谢谢。

Answer 1

您可以使用以下选项之一：

1) 完整 url 到页面

routerLink="/customers/detail"

2) 相对 url 与 ./

routerLink="./detail"

3) 相对 url 开头没有斜线

routerLink="detail"

在最近的两个选项中，路由器将查找当前激活路由的子节点。

另见 RouterLink documentation

Answer 2

如果你想使用 Lazy 路由，那么你需要定义 customer-routing.moudule 如下：-

const routes: Routes = [
    { 
      path: '', 
      component: CustomersComponent, 
    },
    children :[{ path: 'detail', component: CustomerDetailComponent }]    
];

并且您的路由器 link 将 customers/detail 在您的 HTML 部分。

希望对您有所帮助。

Answer 3

您可以使用 routerLink 进行如下导航：

<a [routerLink]="[ '../detail' ]">Redirect To Detail-1</a>

和

<a [routerLink]="[ 'detail' ]">Redirect To Detail-2</a>

两个都是正确的。

或

在客户组件的构造函数中注入以下服务：

Router、ActivatedRoute

constructor(
  private router: Router,
  private route: ActivatedRoute) { }

然后，如果你想使用 (click) 事件重定向到详细信息组件，请使用以下内容：

<a (click)="redirectToDetail()"> Redirect To Detail </a>
redirectToDetail() {
  this.router.navigate(['../detail'], { relativeTo: this.route })
}

angular 惰性路由问题

angular issue on lazy route

lazy-loading

angular