Question

为什么当我输入“ http://localhost:4200/values”时却无法查看页面，并且出现以下错误：“错误：无法匹配任何路由。URL段：“值””

这就是我的代码的方式。

app.routing.ts

export const AppRoutes: Routes = [
  {
    path: '',
    component: FullComponent,
    children: [
      {
        path: '',
        redirectTo: '/starter',
        pathMatch: 'full'
      },
      {
        path: '',
        loadChildren:
          './material-component/material.module#MaterialComponentsModule'
      },
      {
        path: 'starter',
        loadChildren: './starter/starter.module#StarterModule'
      },
      {
        path: 'component',
        loadChildren: './components/component.module#ComponentModule'
      }
    ]
  }
];

component.module.ts

@NgModule({
    imports: [
        CommonModule,
        RouterModule.forChild(ComponentRoutes),
        DemoMaterialModule
    ],
    declarations: [
        ValuesComponent,
        LoginComponent
    ]
})
export class ComponentModule {}

component.routing.ts

export const ComponentRoutes: Routes = [
    // {
    //     path: '',
    //     component: ValuesComponent
    // },
    {
        path: 'values',
        component: ValuesComponent
    },
    {
        path: 'login',
        component: LoginComponent
    }
];

这就是我从链接中调用它的方式

const MENUITEMS = [
  { state: 'starter', name: 'Starter Page', type: 'link', icon: 'av_timer' },
  { state: 'button', type: 'link', name: 'Buttons', icon: 'crop_7_5' },
  { state: 'values', type: 'link', name: 'Values Page', icon: 'assistant' },
];

@Injectable()
export class MenuItems {
  getMenuitem(): Menu[] {
    return MENUITEMS;
  }
}

html链接

<mat-list-item appAccordionLink *ngFor="let menuitem of menuItems.getMenuitem()" routerLinkActive="selected" group="{{menuitem.state}}">
        <a class="" appAccordionToggle [routerLink]="['/', menuitem.state]" *ngIf="menuitem.type === 'link'">
            <mat-icon>{{ menuitem.icon }}</mat-icon> 
            <span>{{ menuitem.name }}</span> 
            <span fxFlex></span> 
            <span class="label label-{{ badge.type }}" *ngFor="let badge of menuitem.badge">{{ badge.value }}</span> 
        </a>


    </mat-list-item>

您能告诉我如何正确执行此操作吗？非常感谢您的帮助。

Answer 1

在localhost:4200/component上，您正在加载ComponentModule。加载该模块后，它将打开并找到path: ''，并加载与该路径关联的组件（在本例中为ValuesComponent）。您也有path: 'values'代表ValuesComponent。

根据您的结构，localhost:4200/values没有路由，如果您需要打开ValuesComponent，则需要加载localhost:4200/component或localhost:4200/component/values

希望这会有所帮助。祝一切顺利！

找不到角度2中的链接路径

1 个答案: