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

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

Answer 2

Поэтому для правильной работы Angular Routing ниже необходимо позаботиться о вещах.

1. Импортируйте RouterModule в свой модуль маршрутизации или app.module.ts.
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>

2. Укажите, куда нужно загрузить маршрут, используя router-outlet. В Angular нам нужно сначала понять две страницы - index.html. Это целевая страница или страница, на которую все будет загружено.

Затем app.component.html - это наш корневой компонент, который идеально подходит для загрузки маршрутов. Просто добавьте приведенный ниже код в файл, где угодно будет работать, пока он находится в файле.

<router-outlet></router-outlet>

Теперь мы должны хорошо ориентироваться в ч / б компонентах.

Ссылка: https://angular.io/tutorial/toh-pt5

Изучение Angular сначала попробуйте этот проект: https://angular.io/tutorial

Answer 3

Вы должны добавить 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' }