Угловая маршрутизация от одного компонента к другому - PullRequest
Новая
       20

Угловая маршрутизация от одного компонента к другому

0 голосов
/ 08 мая 2018

У меня есть один компонент с именем 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?

Ответы [ 2 ]

0 голосов
/ 08 мая 2018

Я приму мое предположение и скажу следующее:

Скорее всего, вы объявляете 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 напрямую или через экспортировать другого импортированный модуль, так что компонент панели инструментов может использовать директиву.

0 голосов
/ 08 мая 2018

Вы должны добавить routerLinkActive = "active" к тегу следующим образом: 

<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' }
...