具有多个路由和路由器出口的角度路由-Java 学习之路

除了导航应用程序根目录之外，我还尝试向组件添加导航，但它不会导航到组件路径 .

我正在使用两个路由器插座：

适用于应用程序根目录的

路由器插座（app.component.html）
用户组件的路由器出口（users.component.html）

有两条路线：

应用程序的

路径（app.routing.module.ts）
用户路由（users.routing.module.ts）

当导航到“ users ”时，我可以看到带有两个链接的 users.component.html ，但是当按下链接“ list ”时，它没有导航到： UsersListComponent 在 users.routing.module.ts 中定义

我不确定这是否是正确的方法 .

下面是项目的文件夹结构和源代码：

-- app.routing.module.ts
-- app.component.html
-- components
   -- dashboard
   -- users
      -- users.component.html
      -- users.module.ts
      -- users.routing.module.ts

app.routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { UsersModule } from './panels/users/users.module';

const AppRouting: Routes = [
    { path: '', redirectTo: 'dashboard', pathMatch: 'full' },
    { path: 'dashboard', component: DashboardComponent },
    { path: 'users', loadChildren: () => UsersModule  }
    { path: '**', component: DashboardComponent }
];

@NgModule({
    imports: [RouterModule.forRoot(AppRouting, { enableTracing: true })],
    exports: [RouterModule],
    providers: []
})
export class AppRoutingModule { }

app.component.html

<div class="app-wrapper">
    <router-outlet></router-outlet>
</div>

users.component.html

<a [routerLinkActive]="['active']" [routerLink]="[{ outlets: { 'users':['list'] } }]" [skipLocationChange]="true">List</a>&nbsp;
<a [routerLinkActive]="['active']" [routerLink]="['create']" [skipLocationChange]="true">Create</a>&nbsp;
<router-outlet name="users"></router-outlet>

users.routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule, RouterOutlet, RouterLink, RouterLinkActive } from '@angular/router';
import { CreateUserComponent } from './user-create/user-create.component';
import { UsersListComponent } from './users-list/users-list.component';
import { UsersComponent } from './users.component';

const UsersRouting: Routes = [
     { path: 'list', component: UsersListComponent, outlet: 'users' },
     { path: 'create', component: CreateUserComponent, outlet: 'users' },
     { path: 'edit', component: CreateUserComponent, outlet: 'users' },
     { path: '', component: UsersComponent }
];

@NgModule({
  imports: [
      RouterModule.forChild(UsersRouting)
  ],
  declarations: [],
  exports: [
      RouterModule
  ],
})
export class UsersRoutingModule {}

users.module.ts

import { NgModule } from '@angular/core';
import { CreateUserComponent } from './user-create/user-create.component';
import { UsersComponent } from './users.component';
import { UsersListComponent } from './users-list/users-list.component';
import { UsersRoutingModule } from './users.routing.module';

@NgModule({
  imports: [
    UsersRoutingModule,
  ],
  declarations: [
    UsersComponent,
    UsersListComponent,
    CreateUserComponent
  ]
})
export class UsersModule { }

提前致谢

2 回答

2
你真的需要一个命名的路由器插座吗？
```
<router-outlet name="users"></router-outlet>
```
或者你可以只使用一个子路由器插座：
```
<router-outlet></router-outlet>
```
我在这里有关于路由的视频可能有所帮助：https://www.youtube.com/watch?v=LaIAHOSKHCQ&t=1s
回复于 2024-05-03T18:42:34+08:00
0
哟...只需指定出口即可定制出口https://angular.io/guide/router#add-a-secondary-route

所以你可以说
```
{
  path: 'compose',
  component: ComposeMessageComponent,
  outlet: 'popup'
},
```
然后，此组件将在 <popup></popup> 组件中呈现
回复于 2024-05-03T18:42:34+08:00

具有多个路由和路由器出口的角度路由

2 回答

相关问题