2

我有一个称为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-和 at 处content-toolbar导入。我有这段代码：routertoolbar.module.tscontent-toolbar.component.tscontent-toolbar.component.html

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

但是此代码不会将此图像转换为指向其他组件的链接。我应该如何将main组件引用为路由器（ed）到 from content-toolbar？

4

3 回答 3

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或通过另一个导入模块的导出，以便工具栏组件可以使用该指令。

于 2018-05-08T12:28:54.203 回答
0

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

  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 { }

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

  1. 调用路由
<span>
    <a routerLink="/main">
      <img src="/assets/icons/logo_white.svg" class="logo">
    </a>
</span>
  1. 使用 router-outlet 指定需要加载路由的位置。在 Angular 中，我们首先要了解 2 个页面是 index.html。这是将加载所有内容的登录页面或页面。

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

<router-outlet></router-outlet>

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

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

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

于 2020-06-21T14:40:30.010 回答
-1

您必须将 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' }
于 2018-05-08T11:57:58.453 回答