从一个组件到另一个组件的角度路由

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 组件，我想在其中创建指向main 组件的链接。 content-toolbar 在 content-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>

但是这段代码并没有把这张图片变成另一个组件的链接。我应该如何从content-toolbar 引用main 要路由的组件？

Answer 1

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

1. 在路由模块或 app.module.ts 中导入 RouterModule。
2. 使用 forroot 在导入部分声明/配置您的路由。
3. 导出 RouteModule 以便它在整个应用程序中可用。
4. 在路由模块或 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 件事待处理。

1. 调用路由

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

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

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

<router-outlet></router-outlet>

现在我们应该可以很好地导航黑白组件了。

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

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

Answer 2

我会猜一猜并说明以下内容：

你很可能在一个看起来像这样的模块中声明ContentToolbarComponent

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

问题在于您可能不将导出RouterLinkDirective 的RouterModule 导入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或通过exports另一个 imported 模块，以便工具栏组件可以使用该指令。

Answer 3

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

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

编辑 路由器对象也应该有 pathmatch: 'full':

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