Question

我试图在路由器中创建子项。但是，我无法在应用程序中呈现子组件。

这是我的代码：

<ul class="nav navbar-nav">
  <li class="active"><a routerLink="/portal/home">Início</a></li>
  <li><a routerLink="/portal/courses">Cursos</a></li>
  <li><a routerLink="">Ferramentas</a></li>
  <li><a routerLink="">Central de Ajuda</a></li>
</ul> 
<router-outlet name="dash"></router-outlet>

上面我们可以通过router-outlet看到我的部分HTML。

在routing.ts下面：

const routes: Routes = [
  {
    path: '',
    pathMatch: 'full',
    redirectTo: 'portal'
  },
  {
    path: 'portal',
    component: PortalComponent,
    children: [
      {
        path:'',
        pathMatch: 'full',
        redirectTo: 'home'
      },
      {
        path: 'home',
        component: HomeComponent,
        outlet:'dash'
      },
      {
        path: 'courses',
        component: CoursesComponent,
        outlet:'dash'
      }
    ]
  },
  {
    path: 'profile',
    component: ProfileComponent
  }
];

这里我们看不到其他组件，因为我试图在这里简化代码。当我尝试点击课程时，错误是：

错误：无法匹配任何路线。 URL细分：门户/课程

我还有另一个页面，我设置了一个路由器插座来处理上面的代码。检查：

<main id="main">
<div id="main-content">
  <div class="container">
    <router-outlet></router-outlet>
  </div>
</div>

<aside id="main-chat">
  <chat-dialog></chat-dialog>
</aside>
  </main>

Answer 1

您必须将指令和目标路线放在括号中

<li class="active"><a [routerLink]="['/portal/home']">Início</a></li>
<li><a [routerLink]="['/portal/courses]'">Cursos</a></li>
<li><a [routerLink]="">Ferramentas</a></li>
<li><a [routerLink]="">Central de Ajuda</a></li>

Answer 2

对我来说，routerLink不在括号内，所以我得到了错误。
将routerLink放在支架内：

<ul class="nav navbar-nav">
  <li class="active"><a routerLink="/portal/home">Início</a></li>
  <li><a routerLink="/portal/courses">Cursos</a></li>
  <li><a routerLink="">Ferramentas</a></li>
  <li><a routerLink="">Central de Ajuda</a></li>
</ul> 
<router-outlet name="dash"></router-outlet>

要指出的另一件事是检查您的app.module.ts是否导入了路由模块类。您的routing.ts应该如下所示：

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

const routes: Routes = [
  {
    path: '',
    pathMatch: 'full',
    redirectTo: 'portal'
  },
  {
    path: 'portal',
    component: PortalComponent,
    children: [
      {
        path:'',
        pathMatch: 'full',
        redirectTo: 'home'
      },
      {
        path: 'home',
        component: HomeComponent,
        outlet:'dash'
      },
      {
        path: 'courses',
        component: CoursesComponent,
        outlet:'dash'
      }
    ]
  },
  {
    path: 'profile',
    component: ProfileComponent
  }
];

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

  exports: [ RouterModule ]

})
export class RoutingModule { }

您的app.module.ts应该是这样的：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
....


@NgModule({
  declarations: [
    AppComponent,
    ...
  ],
  imports: [
    BrowserModule,
    RoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

错误：无法匹配任何路由。网址细分

2 个答案: