Блог

Я пытаюсь добавить к одному из своих компонентов кнопку, которая перенаправит страницу на другой компонент :

 <input type="button" value="Shops List" [routerLink]="['shops-list']" class="btn"&&t;
  

В модуле (дочернем) этого компонента я настроил следующий импорт :

 @N&Module({
  declarations: [ ... ],
  exports: [ ... ],
  imports: [ ....,RouterModule.forChild([{ path: 'shops-list', component: ShopListComponent}])] ,
  providers: [ ..., Router],
})
export class ProductModule{ }
  

Я не уверен, что импортировать в мой AppModule? Я попытался импортировать только RouterModule, но в моей консоли появилась ошибка :

 NullInjectorError: R3InjectorError(AppModule)[RouterModule -&&t; Router -&&t; Function -&&t; Function -&&t; Function]: 
  NullInjectorError: No provider for Function!
  

Я попытался также добавить тот же путь маршрута только для RouterModule.forRoot :

 @N&Module({
  declarations: [AppComponent],
  imports: [........,
    RouterModule.forRoot([{ path: 'shops-list', component: ShopListComponent}])],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
  

но тогда моя кнопка не перенаправляла на ShopListComponent.

Я прочитал несколько сообщений и документов о разнице между ними (forChild, forRoot), но это все еще не ясно для меня. Я понял, что мы хотим избежать наличия 2 экземпляров RouterModule в каждом модуле, и наша цель — создать экземпляр router в главном компоненте и внедрить его в дочерние компоненты.

Что я делаю не так?

Обычно весь маршрут, который вам нужен, определяется следующим образом:

 const routes: Routes = [
  {path: '', component: StatechoisComponent},
  {path: 'lo&in', component: Lo&inComponent},
];

@N&Module({
  imports: [RouterModule.forRoot(routes, {
    scrollPositionRestoration: 'top'
  })],
  exports: [RouterModule]
})
export class AppRoutin&Module { }
  

отсюда перейдите к какому-либо компоненту, используйте что-то вроде этого:

 <button mat-button routerLink='/lo&in'&&t;
  

Импортируйте компоненты в свои RouteModules

 import { N&Module } from '@an&ular/core';
import { Routes, RouterModule } from '@an&ular/router';
import { StatechoisComponent } from './statechois/statechois.component';
import { Lo&inComponent } from './lo&in/lo&in.component';
  

Это экран из моего проекта, пример, показывающий, как это работает

и это результат, если вы сравните мой код в RouterModule, попробуйте понять, почему вы видите два одинаковых элемента