时间戳

首页 > 解决方案 > Angular 子组件路由失败？

javascript - Angular 子组件路由失败？

问题描述

我有管理页面，我有侧导航栏，用户可以在其中进行添加/编辑操作，现在当用户单击时，add添加组件应该显示在 router-oulter 中，但没有发生，有什么帮助吗？

admin.component.html

<div class="container-fluid sidebarContent">
  <div class="row">
    <div class="col-3">
      <nav class="navbar navbar-inverse navbar-fixed-top" id="sidebar-wrapper" role="navigation">
        <ul class="nav sidebar-nav">
            <li>
              <a class="nav-link" routerLink="['/add']" routerLinkActive="active">Add</a>
            </li>
            <li>
              <a class="nav-link" routerLink="['/edit']" routerLinkActive="active">Edit</a>
            </li>
        </ul>
      </nav>
    </div>
    <div class="col-9">
      <router-outlet></router-outlet>
    </div>
  </div>
</div>

app.routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { AdminComponent } from './_components/admin/admin.component';
import { AddComponent } from './_components/admin/add/add.component';


  const routes: Routes = [
    { path: 'admin', component: AdminComponent,
    children: [
      {
        path: "add",
        component: AddComponent
      }
    ]
   },
    { path: '', redirectTo: '/home', pathMatch: 'full' }
  ];

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

标签： javascriptangularangular-ui-router

解决方案

据我所知，您只有一条路线，即 /admin/add。您尝试路由到没有匹配路由的 /add 。

推荐阅读