使用选项卡处理子项

Question

我有一个包含通知项目的主菜单的页面。当我点击该项目时，它会打开下面的另一个面包屑菜单，其中包含两个项目：发送和状态。

我希望能够根据我点击的标签切换这些标签的内容。对于包含这两个元素的子菜单i'm using ng-semantic component。

目前，我一直收到这个错误：

Error: Cannot match any routes. URL Segment: 'notification'

这是我的app.router.ts

import { ModuleWithProviders } from "@angular/core"
import { Routes, RouterModule } from "@angular/router"
import { LoginComponent } from "./component/login/login.component"
import { AppComponent } from "./app.component"
import { AuthGuard } from "./service/_guard/auth.guard"
import { TermOfUseComponent } from "./component/term-of-use/term-of-use.component"

    const appRoutes: Routes = [
        {
            path: "",
            redirectTo: "main",
            pathMatch: "full",
            canActivate: [AuthGuard]
        },
        {
            path: "notification",
            loadChildren: "app/notification/notification.module#NotificationModule",
            canActivate: [AuthGuard]
        },
        { path: "**", redirectTo: "" }
    ]

    export const AppRoutingModule: ModuleWithProviders = RouterModule.forRoot(appRoutes)

这是我的组件路由器文件：

import {ModuleWithProviders} from "@angular/core"
import {Routes, RouterModule} from "@angular/router"
import {NotificationFormComponent} from "./notification-form/static-notification-form.component"
import {NotificationTableComponent} from "./notification-status-table/notification-status-table.component"
import {NotificationBaseComponent} from "./notification.component"

export const routes: Routes = [
    {path: "notification", component: NotificationBaseComponent, redirectTo: "send", pathMatch: "full"},
    {
        path: "notification/send",
        outlet: "send",
        component: NotificationFormComponent,
    },
    {
        path: "notification/status",
        outlet: "status",
        component: NotificationTableComponent,
    }
]
export const NotificationRoutingModule: ModuleWithProviders = RouterModule.forChild(routes)

这里是我的组件html，我想打印子组件：

<div class="ui top attached tabular menu">
    <div class="active item" [routerLink]="['/send', {outlets: send}]" routerLinkActive="active" data-tab="tab-name">Send message</div>
    <div class="item" [routerLink]="['/status', {outlets: {'status': ['none']}}]" data-tab="tab-name2">Message history
    </div>
</div>
<div class="ui bottom attached active tab segment very padded" data-tab="tab-name">
    <router-outlet name="send"></router-outlet>
</div>
<div class="ui tab" data-tab="tab-name2">
    <router-outlet name="status"></router-outlet>
</div>