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会在内容 - router和toolbar.module.ts处导入content-toolbar.component.ts。我在content-toolbar.component.html这段代码：

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

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

Answer 1

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

最有可能在类似

的模块中声明ContentToolbarComponent

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

问题在于，您可能不将导出RouterModule的{{1}}导入RouterLinkDirective。这就是为什么angular不会生成带有超链接的锚元素。

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

MainRoutingModule

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

Answer 2

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

在您的路由模块或app.module.ts中导入RouterModule。
使用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 { }

现在，我们的路由模块已准备就绪，可以处理请求。现在，我们还有两件事待处理。

呼叫路线

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

使用路由器出口指定需要在哪里加载路由。在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 3

你必须添加routerLinkActive =＆＃34; active＆＃34;对于这样的标签：

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

修改路由器对象也应该有pathmatch：＆＃39; full＆＃39;：

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

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

3 个答案: