Question

我想以这样一种方式来实现路由，如果您单击下拉列表，它将转到该特定页面。但是我希望标题保留在路由到其他组件时。它会转到特定的url，但没有显示内容。我尝试了子路由，但似乎不起作用。

上面的图片是下拉菜单的外观。它具有以下网址

localhost：4200 / body

当我单击用户管理时，我希望它进入

localhost：4200 / body / user

尽管转到了特定的网址，但在图片下方没有显示任何内容，如图所示。

这些是我的代码（app.routing.ts和.html）

Answer 1

我认为您忘记在BodyComponent中添加<router-outlet></router-outlet> html。添加所有代码似乎都很好

Answer 2

Accordinh tonthe doc

const crisisCenterRoutes: Routes = [   {
    path: 'crisis-center',
    component: CrisisCenterComponent,
    children: [
      {
        path: '',
        component: CrisisListComponent,
        children: [
          {
            path: ':id',
            component: CrisisDetailComponent
          },
          {
            path: '',
            component: CrisisCenterHomeComponent
          }
        ]
      }
    ]   } ];

因此，您的情况将是：

{ path: 'body', component:      BodyComponent, children: [ { path: '', redirectTo: 'user', pathMatch: 'full' }, { path: 'user', component: UserComponent } ] }

Answer 3

如果您嵌套了路由，则必须嵌套了路由器出口：

{ path: 'user', component: LoginViewComponent,
    children: [
      { path: 'catalog', component: CatalogViewComponent },
      {
        path: 'home',  component: HomeViewComponent,
      }
    ]
},      
{ path: '**', redirectTo: 'user' }

然后：

<div class="container">
    <div class="dropdown">
      <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
      <span class="caret"></span></button>
      <ul class="dropdown-menu">
        <li><a routerLinkActive="active" 
          routerLink="/user">Login</a></li>
        <li> <a routerLinkActive="active" 
          routerLink="/user/home">Home</a></li>
        <li> <a routerLinkActive="active" 
          routerLink="/user/catalog">Catalog</a></li>
      </ul>
    </div>
    <router-outlet></router-outlet>
  </div>

在子组件中：

<h1>Login</h1>
<router-outlet></router-outlet>

I created a working example here。

Answer 4

这是我发生的事情：由于它不起作用，所以我尝试查看如果删除

是否给出错误信息

df['number'] = df['number'].str.replace(',','').astype(int)

没有。但是后来我又贴了贴，结果成功了！！！可能是缓存问题吗？！？

Answer 5

对我来说，我添加了一条路线，如：

{ path: '/', component: HomeComponent }

浏览器控制台抛出错误

Invalid configuration of route '/': path cannot start with a slash

所以我将其替换为：

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

经验教训：密切关注浏览器控制台

角路由未显示内容

5 个答案: