使用标签处理儿童物品

Question

我有一个带有主菜单的页面，该主菜单包含一个Notification项目。 当我单击该项目时，它将打开另一个包含两个项目的面包屑菜单： send和status 。

我希望能够根据单击的选项卡来切换这些选项卡的内容。 对于包含这两个元素的子菜单， 我正在使用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>