Question

我有一个项目，其中包含多个延迟加载的路由模块（请参见下面的内容）。主出口布线就像一个超级按钮，http://localhost:4200/lists/contacts/new呈现正确的组件。

我正在尝试添加功能以在模式窗口中打开特定路线。例如：通过模式窗口直接从主页添加联系人。

我添加了（仅出于测试目的）另一个出口：

<router-outlet></router-outlet>
<router-outlet name="modal" ></router-outlet>

和操作按钮：

<a [routerLink]="[{ outlets: { modal: ['lists/contacts/new'] } } ]">Test</a>

已呈现href：http://localhost:4200/home/(modal:lists/contacts/new)

但是，打开该URL不会将任何内容呈现到模式出口。我究竟做错了什么？谢谢！

ROOT路由（app-routing.module.ts）：

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { AppShellComponent } from '@app/shell/';

import { HomeComponent } from './pages/home/home.component';
import { NotFoundComponent } from './pages/not-found/not-found.component';

import { AuthGuard } from './core';

const routes: Routes = [

    {

        // PUBLIC routing
        {
             path: 'public',
             loadChildren: () => import('./public/public.module').then(m => m.PublicPagesModule)
        },

        path: '',
        component: AppShellComponent,
        canActivate: [AuthGuard],
        children: [

            {
                path: 'home',
                component: HomeComponent,
                pathMatch: 'full'
            },

            {
                path: 'lists',
                loadChildren: () => import('./lists/lists.module').then(m => m.ListsModule)
            },

            {
                path: 'settings',
                loadChildren: () => import('./settings/settings.module').then(m => m.SettingsModule)
            },

            {
                path: '',
                redirectTo: '/home',
                pathMatch: 'full'
            },


            {
                path: 'not-found',
                component: NotFoundComponent
            },

            {
                path: '**',
                component: NotFoundComponent
            }
        ]
    },

    {
        path: '',
        redirectTo: '/home',
        pathMatch: 'full'
    }
];

@NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
})
export class AppRoutingModule { }

列表模块路由（lists-routing.module.ts）：

import { NgModule } from '@angular/core';
import { ModuleWithProviders } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { ContactsListComponent, ContactDetailComponent, ContactEditComponent } from './contacts';
import { ItemsListComponent, ItemEditComponent } from './items';
import { PriceListEditComponent, PriceListsListComponent } from './price-lists';

const _routes: Routes = [

    {
        path: 'contacts',
        loadChildren: () => import('./contacts/contacts.module').then(m => m.ContactsModule)
    },

    {
        path: 'items',
        loadChildren: () => import('./items/items.module').then(m => m.ItemsModule)
    },

    {
        path: '',
        redirectTo: '/lists/contacts',
        pathMatch: 'full'
    }
];

@NgModule({
    imports: [
        RouterModule.forChild(_routes)
    ],
    exports: [
        RouterModule
    ]
})
export class ListsRoutingModule { }

联系人模块路由（contacts-routing.module.ts）：

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { ContactDetailComponent } from './detail/detail.component';
import { ContactEditComponent } from './edit/edit.component';
import { ContactsListComponent } from './list/list.component';

const _routes: Routes = [

    {
        path: 'new',
        component: ContactEditComponent,
        pathMatch: 'full'
    },

    {
        path: ':id',


        children: [
            {
                path: '',
                component: ContactEditComponent,
                pathMatch: 'full'
            },
            {
                path: 'edit',
                component: ContactEditComponent,
                pathMatch: 'full'
            }
        ]
    },

    {
        path: '',
        component: ContactsListComponent,
        pathMatch: 'full'
    }
];

@NgModule({
    imports: [RouterModule.forChild(_routes)],
    exports: [RouterModule]
})
export class ContactsRoutingModule { }

Answer 1

您还需要为出口定义路线：https://angular.io/guide/router#add-a-secondary-route

示例：

{
  path: 'compose',
  component: ComposeMessageComponent,
  outlet: 'popup'
},

Stackblitz示例： https://stackblitz.com/edit/angular-fk3ztp

Angular-具有延迟加载的辅助路由

1 个答案: