首页 > 解决方案 > 无法通过 Angular 中的路由显示组件

问题描述

我有 3 个组件:A、B 和 C。我想在组件 A 中显示一个名为“组件 B”的按钮。单击该按钮时,它应该显示带有“组件 C”链接的 B 组件。单击链接时,它应该显示 c 组件,上面写着“C 组件工作”

应用模块是:

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

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { AComponent } from './a/a.component';
import { BComponent } from './b/b.component';
import { CComponent } from './c/c.component';

@NgModule({
    declarations: [
        AppComponent,
        AComponent,
        BComponent,
        CComponent
    ],
imports: [
    BrowserModule,
    AppRoutingModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

应用路由模块是:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { AComponent } from './a/a.component';
import { BComponent } from './b/b.component';
import { CComponent } from './c/c.component';
import { AppComponent } from './app.component';


const routes: Routes = [
  {
    path: 'a',
    component: AComponent,
  },
  {
    path: 'a',
    component: BComponent,

  },
  {
    path: 'c', component: CComponent
  },
  { 
    path: '**', component: AppComponent 
  }
];

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

app.component.html 是:

<h3>Routing and Navigation</h3>

<router-outlet></router-outlet>

A 组件是:

<h4>It is Component A</h4>
<a class="button" routerLink="a" routerLinkActive='active'>B component</a>
<router-outlet></router-outlet>

B组件是:

<a routerLink="b">C component</a>
<router-outlet></router-outlet>

C组件是:

<p>C component works</p>

当我正在学习使用 Angular 进行路由时,请帮我解决这个问题。如果我知道代码的改进领域和适当的指导,我会很高兴。谢谢你。

标签: javascriptangularangular-routingangular-components

解决方案


这是一个 stackBlitz ,其中包含一个包含所有 3 个组件的工作示例。

https://angular-7ucy2h.stackblitz.io/a

关于角度路由的问题是,如果您希望子路由显示在父路由内,则必须将该路由添加为子路由。

在您的情况下,C 是 B 的孩子,B 是 A 的孩子。

const routes: Routes = [
  {
    path: 'a',
    component: AComponent,
    children: [
      {path: 'b', component: BComponent, children: [
        {path: 'c', component: CComponent}
      ]},
    ]
  },
];


推荐阅读