我正在做一个有角度的管理面板项目。管理员登录部分已经完成,并且在仪表板上,我有一个侧面导航菜单,单击菜单项时,需要将相应的组件加载到主体div中。我的主要电动插座是这样放置在app.component.html
中的:
<router-outlet></router-outlet>
这很好用。以下是我的app-routing.module.ts
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './components/home/home.component';
import { LoginPageComponent } from './components/login-page/login-page.component';
import { AuthGuard } from './guards/auth.guard';
import { ManageNewsComponent } from './components/manage-news/manage-news.component';
import { ManageUsersComponent } from './components/manage-users/manage-users.component';
const appRoutes: Routes = [
// App Routes
{
path: '', component: HomeComponent, canActivate: [AuthGuard], children: [
// Menu Routes
{ path: 'managenews', component: ManageNewsComponent, outlet: 'menu' },
{ path: 'manage_users', component: ManageUsersComponent, outlet: 'menu' }
]
},
{ path: 'login', component: LoginPageComponent },
// otherwise redirect to home
{ path: '**', redirectTo: '' }
];
export const routing = RouterModule.forRoot(appRoutes)
在app.module.ts
@NgModule({
declarations: [
...
],
imports: [
...
routing,
...
],
providers: [
...
],
bootstrap: [AppComponent]
})
export class AppModule { }
在仪表板组件html中,我正在尝试这样做
<mat-toolbar color="warn">
<mat-toolbar-row>
<button type="button" aria-label="Toggle sidenav" mat-icon-button (click)="drawer.toggle()" color="primary">
<mat-icon aria-label="Side nav toggle icon"><i class="fa fa-bars" style="font-size:24px;color:white"></i></mat-icon>
</button>
</mat-toolbar-row>
</mat-toolbar>
<mat-sidenav-container class="example-container">
<mat-sidenav #drawer mode="side" opened role="navigation">
<mat-nav-list>
<a mat-list-item [routerLink]="[{ outlets: { primary: [''], menu: ['managenews'] } }]"> Manage News </a>
</mat-nav-list>
</mat-sidenav>
<mat-sidenav-content>
<router-outlet name="menu"></router-outlet>
</mat-sidenav-content>
</mat-sidenav-container>
但是,单击“管理新闻”菜单项时,页面未重定向,并且在控制台中出现以下错误:
core.js:15724 ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'managenews'
Error: Cannot match any routes. URL Segment: 'managenews'
at ApplyRedirects.push../node_modules/@angular/router/fesm5/router.js.ApplyRedirects.noMatchError (router.js:2469)
at CatchSubscriber.selector (router.js:2450)
at CatchSubscriber.push../node_modules/rxjs/_esm5/internal/operators/catchError.js.CatchSubscriber.error (catchError.js:34)
at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._error (Subscriber.js:80)
at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.error (Subscriber.js:60)
at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._error (Subscriber.js:80)
at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.error (Subscriber.js:60)
at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._error (Subscriber.js:80)
at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.error (Subscriber.js:60)
at TapSubscriber.push../node_modules/rxjs/_esm5/internal/operators/tap.js.TapSubscriber._error (tap.js:61)
at resolvePromise (zone.js:831)
at resolvePromise (zone.js:788)
at zone.js:892
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:423)
at Object.onInvokeTask (core.js:17290)
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:422)
at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:195)
at drainMicroTaskQueue (zone.js:601)
at ZoneTask.push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask [as invoke] (zone.js:502)
at invokeTask (zone.js:1744)
defaultErrorLogger @ core.js:15724
push../node_modules/@angular/core/fesm5/core.js.ErrorHandler.handleError @ core.js:15772
next @ core.js:17771
schedulerFn @ core.js:13515
push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.__tryOrUnsub @ Subscriber.js:196
push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.next @ Subscriber.js:134
push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._next @ Subscriber.js:77
push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next @ Subscriber.js:54
push../node_modules/rxjs/_esm5/internal/Subject.js.Subject.next @ Subject.js:47
push../node_modules/@angular/core/fesm5/core.js.EventEmitter.emit @ core.js:13499
(anonymous) @ core.js:17321
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:391
push../node_modules/zone.js/dist/zone.js.Zone.run @ zone.js:150
push../node_modules/@angular/core/fesm5/core.js.NgZone.runOutsideAngular @ core.js:17258
onHandleError @ core.js:17321
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.handleError @ zone.js:395
push../node_modules/zone.js/dist/zone.js.Zone.runGuarded @ zone.js:164
_loop_1 @ zone.js:694
api.microtaskDrainDone @ zone.js:703
drainMicroTaskQueue @ zone.js:608
push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask @ zone.js:502
invokeTask @ zone.js:1744
globalZoneAwareCallback @ zone.js:1770
我被困住了,在阅读教程时无法弄清楚我在做什么错。请帮忙。