角度路由不显示内容答案

【问题标题】：Angular routing isn't showing content角度路由不显示内容
【发布时间】：2019-03-03 08:50:16
【问题描述】：

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

上图是下拉菜单的样子。它有以下网址

本地主机：4200/正文

当我点击用户管理时，我希望它去

localhost:4200/body/用户

虽然它转到特定的 url，但它没有在下面显示任何内容，如图所示。

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

【问题讨论】：

请发布您的代码而不是图片。请看stackoverflow.com/help/how-to-ask
请创建一个 stackblitz 代码。

标签： javascript angular angular6 angular-routing

【解决方案1】：

我想你忘了在 BodyComponent 中添加 <router-outlet></router-outlet> html。添加它的所有代码似乎都很好

【讨论】：

【解决方案2】：

雅阁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 } ] }

【讨论】：

【解决方案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.

【讨论】：

【解决方案4】：

这就是发生在我身上的事情：由于它不起作用，我试图查看如果我删除它是否会出错

<router-outlet></router-outlet>

它没有。但后来我粘贴回来，它的工作！可能是缓存问题？！？

【讨论】：

【解决方案5】：

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

{ path: '/', component: HomeComponent }

浏览器控制台报错

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

所以我将其替换为：

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

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

【讨论】：