Как динамически составить маршрут в угловых? - PullRequest
Новая
       8

Как динамически составить маршрут в угловых?

0 голосов
/ 12 февраля 2019

Предположим, у меня есть служба, которая извлекает массив путей, отформатированных в json, например: 

[{
    "path": "routeName"
    "component": "MyComponent"
}]

Из слов "MyComponent" извлекается как строка.Теперь я хочу перевести этот массив в Маршруты для модуля маршрутизации.Как я могу преобразовать «MyComponent» в класс MyComponent?

Цель этого - сделать так, чтобы мой интерфейс не знал, что это такое.Чтобы добавить новые маршруты и компоненты, мне просто нужно добавить новую запись в файл на сервере и сделать так, чтобы она соответствовала имени компонента, который я создаю внутри углового приложения.

Ответы [ 2 ]

0 голосов
/ 12 февраля 2019

Вот модуль приложения 

export const routes: Route[] = [

];
@NgModule({
  declarations: [
    AppComponent,
    ErrorHandleComponent,
    FilterComponent,
    CreateComponent
  ],
  imports: [
    BrowserModule,
    RouterModule.forRoot(routes),
    // AppRoutingModule,
    HttpClientModule
  ],
  entryComponents: [
    CreateComponent,
    FilterComponent,
    ErrorHandleComponent
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

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

import { CreateComponent } from '../create/create.component';
import { FilterComponent } from '../filter/filter.component';
import { ErrorHandleComponent } from '../error-handle/error-handle.component';

export const components = {
    'CreateComponent': CreateComponent,
    'FilterComponent': FilterComponent,
    'ErrorHandleComponent': ErrorHandleComponent,
};

Затем вставьте этот код в приложение.файл component.ts 

  constructor(private api: ApiService, private router: Router) {

  }
  getRoute() {
    this.api.get_route().subscribe(res => {
      res.forEach(element => {
         // components key value pair obj
         element.component = components[element.component]; 
        routes.push(element);
      });
      this.rlist = routes;
      this.router.resetConfig(routes);
    });
0 голосов
/ 12 февраля 2019

Шаг 1: Внедрить маршрутизатор в модуль приложения

Шаг 2: Вы можете изменить router.config как хотите 

@
NgModule({
declarations: [
  HomeComponent
  ...
],
imports: [
    RouterModule.forRoot([
        { path: '', redirectTo: 'home', pathMatch: 'full' },
        { path: 'home', component: HomeComponent },
        { path: '**', redirectTo: 'home' }
    ])
],
providers: []})


export class AppModule {
constructor(router: Router) {
    router.config.unshift({ path: 'new_path', component: NewComponent });
}}
...