Angular 从一个组件路由到另一个组件

Question

我有一个名为 main 的组件，它具有此处定义的 main.routing.ts：

@NgModule({
  imports: [
    RouterModule.forRoot([
      { path: 'main',
        component: MainComponent,
        canActivate: [AuthGuard],
        children: [{ path: '', component: AccountMainComponent },
      { path: 'financial-accounts', component: FinancialAccountsComponent },
      { path: 'system-config', component: ConfigSysComponent },
      { path: 'conciliacao', component: ConciliacaoContabilComponent },
      { path: 'report', component: ReportComponent },
      ]}
    ])
  ]
 })
 export class MainRouting { }

我还有另一个 content-toolbar 组件，我想在其中创建一个 link 到 main 组件。 content-toolbar 在内容-toolbar.module.ts 和 content-toolbar.component.ts 导入 router。我在 content-toolbar.component.html 有这段代码：

<span>
    <a routerLink="/main">
      <img src="/assets/icons/logo_white.svg" class="logo">
    </a>
</span>

但是此代码不会将此图像转换为 link 到另一个组件。我应该如何从 content-toolbar 引用 main 组件以进行路由（编辑）？

Answer 1

您必须像这样将 routerLinkActive="active" 添加到 a 标签中：

<span>
    <a routerLink="/main" routerLinkActive="active">
      <img src="/assets/icons/logo_white.svg" class="logo">
    </a>
</span>

编辑路由器对象也应该有路径匹配：'full':

children: [{ path: '', component: AccountMainComponent, pathMatch: 'full' }

Answer 2

我猜一下并说明如下：

您很可能在如下所示的模块中声明了 ContentToolbarComponent

@NgModule({
imports: [..., MainRoutingModule,...],
declarations: [..., ContentToolbarComponent, ...]
})
export class FooModule {}

问题是您可能不将 RouterModule 导入 RouterLinkDirective 到 FooModule。这就是为什么 angular 没有生成带有超链接的锚元素。

解决方案是将 RouterModule 添加到 MainRoutingModule 的导出中，如下所示：

@NgModule({
  imports: [
    RouterModule.forRoot([
      { path: 'main',
        component: MainComponent,
        canActivate: [AuthGuard],
        children: [{ path: '', component: AccountMainComponent },
      { path: 'financial-accounts', component: FinancialAccountsComponent },
      { path: 'system-config', component: ConfigSysComponent },
      { path: 'conciliacao', component: ConciliacaoContabilComponent },
      { path: 'report', component: ReportComponent },
      ]}
    ])
  ],
  exports: [RouterModule]
 })
 export class MainRouting { }

重要的是，声明工具栏组件的模块必须直接或通过导入 RouterModule另一个 imported 模块的 exports，以便工具栏组件可以使用该指令。

Answer 3

因此，为了让 Angular 路由正常工作，需要注意以下事项

在路由模块中导入 RouterModule 或 app.module.ts。
Declare/configure 您在导入部分中使用 forroot 的路由。
导出 RouteModule 以便它在整个应用程序中可用。
在路由模块或 app.module.ts 中导入组件。

import { RouterModule } from '@angular/router';
//import your components

@NgModule({
  declarations:[your components],//your components needs to declared here.
  imports: [
    RouterModule.forRoot([
      { path: 'main',
        component: MainComponent,
        canActivate: [AuthGuard],
        children: [{ path: '', component: AccountMainComponent },
      { path: 'financial-accounts', component: FinancialAccountsComponent },
      { path: 'system-config', component: ConfigSysComponent },
      { path: 'conciliacao', component: ConciliacaoContabilComponent },
      { path: 'report', component: ReportComponent },
      ]}
    ]) //this defines/configures all the routes of the application
  ],
exports: [RouterModule] //this will export RouterModule through which we will be able to discover our routes
 })
 export class MainRouting { }

现在我们的路由模块已准备好处理请求。现在我们还有 2 件事未决。

调用路由

<span>
    <a routerLink="/main">
      <img src="/assets/icons/logo_white.svg" class="logo">
    </a>
</span>

使用router-outlet指定需要加载路由的位置。在Angular，我们有2个页面首先要了解的是index.html。这是将加载所有内容的着陆页或页面。

接下来，app.component.html 是我们的根组件，非常适合加载路由。只需将以下代码添加到文件中的任何位置，只要它在文件中即可。

<router-outlet></router-outlet>

现在我们应该可以很好地导航 b/w 个组件了。

参考：https://angular.io/tutorial/toh-pt5#add-routeroutlet

学习Angular先试试这个项目：https://angular.io/tutorial

Angular 从一个组件路由到另一个组件

Angular routing from one component to another

angular

routing

angular-router

angular-routerlink