Question

我正在使用Angular 5.0.0。我正在尝试使用侧边菜单，然后在单击菜单选项时，屏幕的其余部分会显示相应的内容。

我有一个ProposalsModule，它包含可以从侧边菜单中检索到的所有组件。

import { NgModule } from '@angular/core';

import { SharedModule } from '../../common-components/shared.module';
import { ProposalsRoutingModule } from './proposals-routing.module';

import { Router } from '@angular/router';

import { ProposalStatusComponent } from './proposal-status/proposal-status.component';
import { ProposalConfigComponent } from './proposal-config/proposal-config.component';
import { ProposalStdDeliveryComponent } from './proposal-std-delivery/proposal-std-delivery.component';
import { ProposalTemplateComponent } from './proposal-template/proposal-template.component';
import { ProposalItemMnfgTimeComponent } from './proposal-item-mnfg-time/proposal-item-mnfg-time.component';

@NgModule({
  imports: [
    SharedModule,
    ProposalsRoutingModule
  ],
  declarations: [
    ProposalConfigComponent,
    ProposalStatusComponent,
    ProposalStdDeliveryComponent,
    ProposalTemplateComponent,
    ProposalItemMnfgTimeComponent
  ]
})
export class ProposalsModule { }

这是ProposalsRoutingModule：

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

import { ProposalConfigComponent } from './proposal-config/proposal-config.component';
import { ProposalStatusComponent } from './proposal-status/proposal-status.component';
import { ProposalStdDeliveryComponent } from './proposal-std-delivery/proposal-std-delivery.component';
import { ProposalItemMnfgTimeComponent } from './proposal-item-mnfg-time/proposal-item-mnfg-time.component';
import { ProposalTemplateComponent } from './proposal-template/proposal-template.component';

const proposalRoutes: Routes = [
    { path: 'config', component: ProposalConfigComponent },
    { path: 'status', component: ProposalStatusComponent, outlet: 'proposalconfig' },
    { path: 'stddelivery', component: ProposalStdDeliveryComponent, outlet: 'proposalconfig' },
    { path: 'itemmnfgtime', component: ProposalItemMnfgTimeComponent, outlet: 'proposalconfig' },
    { path: 'template', component: ProposalTemplateComponent, outlet: 'proposalconfig' }
];

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

以下是该页面的html：

<div fxLayout="row">
    <mat-card>
        <mat-card-subtitle>Proposal Configuration</mat-card-subtitle>
        <mat-list>
            <mat-list-item>
                <button mat-button [routerLink]="['',{ outlets: { proposalconfig: ['status'] } }]" routerLinkActive="active">Statuses</button>
            </mat-list-item>
            <mat-list-item>
                <button mat-button [routerLink]="['',{ outlets: { proposalconfig: ['stddelivery'] } }]" routerLinkActive="active">Standard Delivery</button>
            </mat-list-item>
            <mat-list-item>
                <button mat-button [routerLink]="['',{ outlets: { proposalconfig: ['itemmnfgtime'] } }]" routerLinkActive="active">Item Manufacturing Time</button>
            </mat-list-item>
            <mat-list-item>
                <button mat-button [routerLink]="['',{ outlets: { proposalconfig: ['template'] } }]" routerLinkActive="active">Templates</button>
            </mat-list-item>
        </mat-list>
    </mat-card>

    <router-outlet name="proposalconfig"></router-outlet>
</div>

这是我的主要路由模块：

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

import { HomeComponent }   from './home/home.component';
import { ManufacturingMachineComponent }      from './administrative/utilities/manufacturing-machine/manufacturing-machine.component';
import { ProposalConfigComponent } from './sales/proposals/proposal-config/proposal-config.component';

const routes: Routes = [
  { path: '', redirectTo: 'Home', pathMatch: 'full' },
  { path: 'Home', component: HomeComponent },
  { path: 'administrative/utilities/manufacturingmachine', component: ManufacturingMachineComponent },
  { path: 'administrative/utilities/units', loadChildren: 'app/administrative/utilities/units/units.module#UnitsModule' },
  { path: 'sales/proposals', loadChildren: 'app/sales/proposals/proposals.module#ProposalsModule' },
  { path: '**', redirectTo: 'Home', pathMatch: 'full' }
];

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

如果我导航到/ sales / proposals / config，那么我的侧边菜单会按预期显示，而且我没有看到任何错误。如果我单击任何菜单选项，则没有错误，并且网址会更改为我认为正确的网址。例如，http://localhost:4200/sales/proposals/config(proposalconfig:status)。问题是组件实际上并没有出现在指定的插座中。

我怀疑我错过了某处的导入或类似的东西，但我无法弄清楚它是什么。有人看到什么遗失了吗？

谢谢！

Answer 1

我仍然不确定上述方法存在什么问题，但我最终将所有上述组件都作为ProposalConfig模块的一部分。然后我在html中为ProposalConfig组件添加了[未命名] <router-outlet></router-outlet。然后我添加了一个ProposalConfigRouting模块，其中包含：

const proposalConfigRoutes: Routes = [
    {   
        path: 'sales/proposals/config',
        component: ProposalConfigComponent,
        children: [
            { path: 'status', component: ProposalStatusComponent },
            { path: 'stddelivery', component: ProposalStdDeliveryComponent },
            { path: 'itemmnfgtime', component: ProposalItemMnfgTimeComponent },
            { path: 'template', component: ProposalTemplateComponent }
        ]
    }
];

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

ProposalConfig组件的html（侧面菜单）随后变为：

<div fxLayout="row">
    <mat-card>
        <mat-card-subtitle>Proposal Configuration</mat-card-subtitle>
        <mat-list>
            <mat-list-item>
                <button mat-button routerLink="status" routerLinkActive="active">Statuses</button>
            </mat-list-item>
            <mat-list-item>
                <button mat-button routerLink="stddelivery" routerLinkActive="active">Standard Delivery</button>
            </mat-list-item>
            <mat-list-item>
                <button mat-button routerLink="itemmnfgtime" routerLinkActive="active">Item Manufacturing Time</button>
            </mat-list-item>
            <mat-list-item>
                <button mat-button routerLink="template" routerLinkActive="active">Templates</button>
            </mat-list-item>
        </mat-list>
    </mat-card>
    <router-outlet></router-outlet>
</div>

来自子模块的Angular命名路由器出口仍为空

1 个答案: