Угловая конфигурация с 7 URL - PullRequest
Новая
       25

Угловая конфигурация с 7 URL

0 голосов
/ 04 января 2019

Я работаю над приложением angular 7, где я столкнулся с интересной проблемой прямо сейчас.

Моя цель - не использовать «жестко закодированные URL» в приложении.

Итак, у меня есть подход, такой как ведение единого конфигурационного файла, в котором я могу иметь все URL-адреса сайта и предоставление необходимых компонентов и модулей.

Имея конфигурацию, подобную приведенной ниже, коды.

route.ts // Файл конфигурации Url 

import { LayoutComponent } from './layout/layout.component';
import { AdminIndexComponent } from './admin-index/admin-index.component';
import { AdminRegisterComponent } from './admin-register/admin-register.component';
import { LoginComponent } from './login.component';

export class AppRoutes {

    // Angular components url
    public static componentsUrl = {
        base: {
            path: '',
            component: AdminIndexComponent,
            pathMatch: 'full'
        },

        register: {
            path: 'register',
            component: AdminRegisterComponent
        },

        login: {
            path: 'login',
            component: LoginComponent
        },

        home: {
            path: 'home',
            component: LayoutComponent
        }
    };

rout-service.ts 

import { Injectable } from '@angular/core';
import { AppRoutes } from './routes';
import { environment } from '../environments/environment';

@Injectable({
  providedIn: 'root',
})

export class AppRouterService {
  routesArray = [];

  getAppRoutesArray() {
    Object.entries(AppRoutes.componentsUrl).forEach(
        ([key, value]) => this.routesArray.push(value)
    );
    return this.routesArray;
  }
}

app-routing.module 

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { AppRouterService } from './routes-service';

const routes: Routes = ;

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

В этом все хорошоуровень.Я могу предоставить URL для маршрутизации.

Но интересный случай, у меня есть другой компонент, которому нужен URL.

admin-index.component.ts 

import { Component, OnInit } from '@angular/core';
import { RegistrationModule } from 'shared-components';
import { AppRouterService } from '../routes-service'; // Causing the circular dependency

@Component({
  selector: 'app-admin-index',
  templateUrl: './admin-index.component.html',
  styleUrls: ['./admin-index.component.scss']
})
export class AdminIndexComponent implements OnInit {

  appRoutesUrl;
  constructor(private regModule: RegistrationModule, private routerService: AppRouterService) { }

  ngOnInit() {
    this.appRoutesUrl = this.routerService.getAppRoutesObject(); // This variable in binding to component html. So I can retrieve the url from config file
  }
}

Пока я так делаю, у меня появляется предупреждение типа " ПРЕДУПРЕЖДЕНИЕ при обнаружении циклической зависимости ".Я знаю, что импорт " AdminIndexComponent " на rout.ts вызывает это предупреждение.

Могу ли я узнать, как избавиться от этой проблемы?Также, пожалуйста, предложите эффективный способ сделать это?

Спасибо.

1 Ответ

0 голосов
/ 12 марта 2019

Сначала в app.module.ts, добавьте import { RouterModule, Routes} from '@angular/router';

Затем добавьте этот импорт, RouterModule.forRoot(appRoutes).

После этого вы можете создать маршрут в следующем файле следующим образом.

const appRoutes: Routes = [
  {path: '', component:AdminIndexComponent},
  {path: 'register', component:AdminRegisterComponent},
  {path: 'login', component:LoginComponent},
  {path: 'home', component:LayoutComponent}
]
...