无法通过 Angular 中的路由显示组件

Posted 2023-03-13

【中文标题】无法通过 Angular 中的路由显示组件

【英文标题】：Not able to display component via routing in Angular

【发布时间】：2020-10-24 06:34:06

【问题描述】：

我有 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 路由时帮助我。如果我知道代码的改进领域和适当的指导，我会很高兴。谢谢。

【问题讨论】：

这些组件会显示在同一个窗口中吗？像按钮 A 然后在它下面按钮 B 然后在它下面 C 组件工作？

BComponent 的路径应该是'b'，而不是'a'

@MjJameel 是的，它必须显示在同一窗口下。

【参考方案1】：

您根本不需要路由来完成您的要求。如果组件 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>

【讨论】：

是的，但在许多情况下，开发人员希望通过路线分隔事物，也许这就是其中之一

单独的路由对最终用户非常有用，因为它们允许您为更具体的页面添加书签、共享指向特定事物的链接等

【参考方案2】：

这里是一个 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
      ],
    ]
  ,
];

【讨论】：

链接失效。有的话可以再发一次吗？

这很奇怪，我又试了一次，链接对我有用。这里再试一次。 angular-7ucy2h.stackblitz.io/a

其他组件也有任何错误，因为我按照你说的实现了子路由，但我仍然没有得到输出。

你现在能看到stackblitz吗？试试这个链接。它使您可以查看每个组件及其编写方式。 stackblitz.com/edit/angular-7ucy2h。而且我做的stackBlitz没有错误

请记住，您的 app-component.html 必须有一个 A 和 B 组件也是如此。