Angular - Ошибка при создании маршрутов в Angular

#angular #typescript

Вопрос:

Я новичок в Angular и хочу создавать маршруты в своем приложении angular, и я получил ошибку в app.module.ts при объявлении службы маршрутов. Я запутался в том, что я пишу в скобках RouterModule.forRoot()

 error: error TS2304: Cannot find name 'Routes'.RouterModule.forRoot(Routes)

маршрут.service.ts:

 import { Injectable } from '@angular/core';
import { Routes } from '@angular/router';
import { ParentComponent } from '../parent/parent.component';
import { from } from 'rxjs';
import { ChildComponent } from '../child/child.component';

const appRoutes:Routes=[

  {path:"parent",component:ParentComponent},
  {path:"child",component:ChildComponent}
]
@Injectable({
  providedIn: 'root'
})
export class RoutesService {

  constructor() { }
}

app.module.ts:

 import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
// import {MessageserviceService} from './services/messageservice.service'
import {MessageserviceService} from './services/messageservice.service';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { ParentComponent } from './parent/parent.component';
import { ChildComponent } from './child/child.component';
import { RoutesService } from './services/routes.service';
import { RouterModule } from '@angular/router';

@NgModule({
  declarations: [
    AppComponent,
    ParentComponent,
    ChildComponent,
    
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    RouterModule.forRoot(appRoutes)  //i got error in this line, 
    

  ],
  providers: [MessageserviceService,RoutesService],
  bootstrap: [AppComponent]
})
export class AppModule { }

Ответ №1:

Переместить это объявление

 const appRoutes: Routes = [

  {path:"parent",component:ParentComponent},
  {path:"child",component:ChildComponent}
]

к AppModule . Кроме того, похоже, что вы можете просто удалить RoutesService , я не думаю, что это выполняет какую-либо функцию.

1. да, если я добавлю маршруты в app.module.ts, тогда это сработает, но я хочу отделить маршруты от других моих файлов / папок, поэтому я создал сервисы, но я не знаю, как мне создавать пути с помощью сервисов.

Ответ №2:

Если вы пытаетесь отделить маршруты от основного модуля, просто создайте routingModule, как это делается в документации angular:https://angular.io/tutorial/toh-pt5#add-the-approutingmodule

Кстати, ваш код просто не может работать. Если вы хотите сохранить «подходящие маршруты» в файле службы, то либо используйте

 export const appRoutes: Routes = [

  {path:"parent",component:ParentComponent},
  {path:"child",component:ChildComponent}
];

Но тогда ваш сервис просто бесполезен.

Или переместите соответствующие маршруты внутри вашего сервиса и объявите его как атрибут вашего сервиса.

В обоих случаях обязательно импортируйте соответствующие маршруты в AppModule.

Но опять же, это не совсем способ обработки маршрутизации в «обычном» приложении angular.