Angular 中无法通过路由显示组件
Not able to display component via routing in Angular
我有 3 个组件:A、B 和 C。我想在组件 A 中显示一个名为“组件 B”的按钮。单击该按钮时,它应该显示带有 link 语句的 B 组件“组件 C”。单击 link 它应该显示 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 中的路由。如果我知道代码的改进领域和适当的指导,我会很高兴。谢谢。
这里是一个 stackBlitz,其中包含一个包含所有 3 个组件的工作示例。
https://angular-7ucy2h.stackblitz.io/a
关于 angular 路由的事情是,如果您希望 child 路由显示在 parent 路由内部,您必须将该路由添加为 child.
在你的例子中,C 是 B 的 child,B 是 A 的 child。
const routes: Routes = [
{
path: 'a',
component: AComponent,
children: [
{path: 'b', component: BComponent, children: [
{path: 'c', component: CComponent}
]},
]
},
];
您根本不需要路由来完成您的要求。如果组件 B 和 C 在组件 A 的“内部”,则您不会路由到它们。你只是显示它们。
<h4>It is Component A</h4>
<a class="button" (click)="showBFlg = true">B component</a>
<div *ngIf="showBFlg">
<app-b></app-b>
<a class="button" (click)="showCFlg = true">C component</a>
</div>
<app-c *ngIf="showCFlg"></app-c>
我有 3 个组件:A、B 和 C。我想在组件 A 中显示一个名为“组件 B”的按钮。单击该按钮时,它应该显示带有 link 语句的 B 组件“组件 C”。单击 link 它应该显示 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 中的路由。如果我知道代码的改进领域和适当的指导,我会很高兴。谢谢。
这里是一个 stackBlitz,其中包含一个包含所有 3 个组件的工作示例。
https://angular-7ucy2h.stackblitz.io/a
关于 angular 路由的事情是,如果您希望 child 路由显示在 parent 路由内部,您必须将该路由添加为 child.
在你的例子中,C 是 B 的 child,B 是 A 的 child。
const routes: Routes = [
{
path: 'a',
component: AComponent,
children: [
{path: 'b', component: BComponent, children: [
{path: 'c', component: CComponent}
]},
]
},
];
您根本不需要路由来完成您的要求。如果组件 B 和 C 在组件 A 的“内部”,则您不会路由到它们。你只是显示它们。
<h4>It is Component A</h4>
<a class="button" (click)="showBFlg = true">B component</a>
<div *ngIf="showBFlg">
<app-b></app-b>
<a class="button" (click)="showCFlg = true">C component</a>
</div>
<app-c *ngIf="showCFlg"></app-c>