Angular 无法导航到子组件答案

【问题标题】：Angular can not navigate to child componentAngular 无法导航到子组件
【发布时间】：2019-07-28 08:28:31
【问题描述】：

我在使用 Angular 7 实现路由时遇到了问题。代码很简单，但我找不到，问题是什么。也许你可以帮助我。

代码如下：

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
  <div class="container">
    <a routerLinkActive="active" 
       routerLink="/login">Login</a> |

    <a routerLinkActive="active" 
       routerLink="/home/catalog">Homasdfasdfe</a> | 
      
    <a routerLinkActive="active" 
       routerLink="/home/">Home</a> | 

    <a routerLinkActive="active" 
      routerLink="/catalog">Catalog</a> 
      
    <router-outlet></router-outlet>
  </div>
  `,
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {

}

app-routing.module.ts:

import { RouterModule } from '@angular/router';
import { NgModule } from '@angular/core';
import { LoginViewComponent } from './views/login/login.component';
import { HomeViewComponent } from './views/home/home.component';
import { CatalogViewComponent } from './views/catalog/catalog.component';

@NgModule({
  declarations: [ 
    LoginViewComponent, HomeViewComponent, CatalogViewComponent
  ],
  imports: [
    RouterModule.forRoot([
      { path: 'login', component: LoginViewComponent },
      { path: 'home', component: HomeViewComponent, children: [
         { path: 'catalog', component: CatalogViewComponent }
      ] },
      { path: 'catalog', component: CatalogViewComponent },
      { path: '**', redirectTo: 'login' }
    ])
  ],
  exports: [
    RouterModule,
  ],
  providers: [],

})
export class AppRoutingModule {}

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app.routing.module';

@NgModule({
  declarations: [ AppComponent],
  imports: [ 
    AppRoutingModule, 
    BrowserModule, FormsModule, HttpModule 
  ],
  bootstrap: [ AppComponent ]
})
export class AppModule { }

问题是，如果我点击 Homasdfasdfe，它会显示 home 的内容，而不是目录。

有什么解决办法吗？

最好的问候，

狮子座

【问题讨论】：

如果要路由 /catalog 为什么要添加 /home/catalog 作为路径？
你是否在你的 AppModule 中导入你的 AppRoutingModule？
嗨，Gary，我只是想试试 /catalog 作为子路由，它是否也有效。如果我删除 /catalog，它也无法导航到 /home/catalog。
嗨 Julien，是的，我已经导入了 AppRoutingModule，我也插入了代码。

标签： angular routing navigation

【解决方案1】：

尝试如下更改回家的路线。

RouterModule.forRoot([
   { path: 'login', component: LoginViewComponent },
   { path: 'home', children: [
      { path:'', component: HomeViewComponent },
      { path: 'catalog', component: CatalogViewComponent }
   ]},
   { path: 'catalog', component: CatalogViewComponent },
   { path: '**', redirectTo: 'login' }
])

【讨论】：

【解决方案2】：

我认为您的问题是您在子路线中使用“CatalogViewComponent”组件，然后在其下方的主要道路中使用。尝试删除主要的“目录”路由，也许这会解决您的问题。

【讨论】：

嗨克里斯托弗，我已经尝试过你的解决方案，但它也没有工作。这和往常一样。