时间戳

首页 > 解决方案 > Angular Routes 不接受 json 数组路由

javascript - Angular Routes 不接受 json 数组路由

问题描述

问题

所以我对 Angular 还是很陌生，但很快就加快了步伐。我希望 Angular 在其路由功能方面是动态的。因此，我为 Angular 创建了一个小 api 来联系返回一个数组。当我遍历数组时，它的内容在加载到路由模块时不会被应用。但是，如果我使用相同的方法来加载硬编码的路线，它确实有效！

当我定位 url: cms/bla 或 cms/dashboard 时，它可以工作，但无法识别任何其他 url。[i]['path'] 是一个字符串。例如，作为 cms/login angular 的字符串之一将其返回为未找到。我在这里错过了什么吗？

当我查看控制台时，它向我显示：(3) [{...}, {...}, {...}]，当我打开它的内容时，我的所有路线都在那里，包括最底部的硬编码路线。

这是我的代码

import { ApiResult } from './objects/api';

import { DashboardComponent } from './dashboard/dashboard.component';

import { NgModule } from '@angular/core';
import { RouterModule, Routes, } from '@angular/router';

import { environment } from '../environments/environment';

const routes: Routes = prepareRoutes();

function prepareRoutes() {
  const newRoutes: Routes = [{path: 'cms/bla', component: DashboardComponent}];
  newRoutes.unshift({path: 'bla', component : DashboardComponent});
  newRoutes.unshift({path: 'cms/dashboard', component : DashboardComponent});

  fetch(environment.apiUrl + '/routes/').then((value: Response)  => {
    return value.json();
    }).then((routeResults: ApiResult) => {
    for (let i = 0; i < routeResults.data.length; i++) {
      newRoutes.unshift({path: routeResults.data[i]['path'], component: DashboardComponent});
      }
    });
  return newRoutes;
}

console.log(routes);
@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
})

export class AppRoutingModule {
}

更新#1 

import { ApiResult } from './objects/api';

import { DashboardComponent } from './dashboard/dashboard.component';

import { NgModule } from '@angular/core';
import { RouterModule, Routes, Router} from '@angular/router';

import { environment } from '../environments/environment';

const routes: Routes = [{path: 'cms/bla', component: DashboardComponent},
{path: 'bla', component : DashboardComponent},
{path: 'cms/dashboard', component : DashboardComponent}];

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

export class AppRoutingModule {
  constructor(router: Router) {
    fetch(environment.apiUrl + '/routes/').then((value: Response)  => {
    return value.json();
    }).then((routeResults: ApiResult) => {
    for (let i = 0; i < routeResults.data.length; i++) {
      router.config.unshift({path: routeResults.data[i]['path'], component: DashboardComponent});
      }
      console.log(router.config);
    });
 }
}

标签： javascriptangulartypescript

解决方案

当您发出 API 请求以获取路由时，这些路由将变为异步。当 API 响应到来时，您只返回了带有硬编码的路由。

您可以使用“Router.config”在 AppComponent（或任何其他组件）中添加异步路由

在您的 AppComponent 构造函数中执行以下操作。

    constructor(router: Router){
        fetch(environment.apiUrl + '/routes/').then((value: Response)  => {
        return value.json();
        }).then((routeResults: ApiResult) => {
        for (let i = 0; i < routeResults.data.length; i++) {
          this.router.config.unshift({path: routeResults.data[i]['path'], component: DashboardComponent});
          }
        });
     }

推荐阅读