javascript - 来自数据库的 Angular 6 动态路由表

Question

我想从数据库中定义 app.routing.ts 中的路由表。路由文件的数据将在项目初始化时从数据库中的表中检索。

我通过从 app.component.ts 发出 HTTP Get 调用并将同一文件中的路由添加到路由配置中进行了相同的尝试。

当我在进行数据库调用并添加相同的路由后添加路由时，它不会给出错误。当我路由相同时，它给我一个错误，即没有可用的路由。

请帮助我。任何形式的帮助表示赞赏

我曾尝试开发相同的原型。

app.component.ts

import { Component } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Observable } from 'rxjs';
import { Routes } from '@angular/router';
import { Router } from '@angular/router';
import { AppModule } from './app.module';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app';
  routes: Routes = [];
  data: any;
  loaded: boolean = false;

  constructor(private http: HttpClient, private router: Router) {
    this.getJSON().subscribe(data => {
      //routes.push(data);
      if (!this.loaded) {
        let routerConfig = this.router.config;
        //routerConfig.unshift(data[0]);
        // routerConfig[0]._loadedConfig.routes[0].children.unshift({
        //   path: `lazy`,
        //   loadChildren: 'app/lazy.module#LazyModule'
        // });
        // console.log('/lazy route (Portal child) added', 
         routerConfig);
        //this.router.resetConfig(routerConfig);
        let compName = data[0].component;
        let comp: any = 
        (<any>AppModule).__annotations__[0].declarations.find(comp => 
        {
           return comp.name === compName;
        });
        routerConfig.unshift({path: 'login', component: 
        mapping[comp]})

        this.router.resetConfig(routerConfig);
        this.loaded = true;
      }
    });
  }

  public getJSON(): Observable<any> {
    return this.http.get("https://api.myjson.com/bins/1g16wr");
  }
}

//app.routing.ts

import { RouterModule, Routes } from '@angular/router';
import { LoginComponent } from "./login/login.component";
import { AddUserComponent } from "./add-user/add-user.component";
import { ListUserComponent } from "./list-user/list-user.component";
import { EditUserComponent } from "./edit-user/edit-user.component";
import { Component, OnInit } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Observable } from 'rxjs';
const routes: Routes = [];



// function f(){
//   console.log(this.http.get("https://api.myjson.com/bins/mfh63"));
// }

// f();

// const routes: Routes = [
//   { path: 'login', component: LoginComponent },
//   { path: 'add-user', component: AddUserComponent },
//   { path: 'list-user', component: ListUserComponent },
//   { path: 'edit-user', component: EditUserComponent },
//   { path: '*', component: LoginComponent }
// ];


//   { path: 'login', component: LoginComponent },
//   { path: 'add-user', component: AddUserComponent },
//   { path: 'list-user', component: ListUserComponent },
//   { path: 'edit-user', component: EditUserComponent },
//   { path: '*', component: LoginComponent }
// ];

// export class TestComponent implements OnInit {
//   constructor(private http: HttpClient) {
//     console.log('second');
//     this.getJSON().subscribe(data => {
//       let testData = data;
//       routes.push(testData);
//       console.log(routes);
//     });

//   }
//   ngOnInit() {
//     console.log('first');
//   }

//   public getJSON(): Observable<any> {
//     return this.http.get("https://api.myjson.com/bins/mfh63");
//   }
// }

export const routing = RouterModule.forRoot(routes);

app.component.html

<router-outlet></router-outlet>

app.module.ts

import { RouterModule, Routes } from '@angular/router';
import { LoginComponent } from "./login/login.component";
import { AddUserComponent } from "./add-user/add-user.component";
import { ListUserComponent } from "./list-user/list-user.component";
import { EditUserComponent } from "./edit-user/edit-user.component";
import { Component, OnInit } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Observable } from 'rxjs';
const routes: Routes = [];



// function f(){
//   console.log(this.http.get("https://api.myjson.com/bins/mfh63"));
// }

// f();

// const routes: Routes = [
//   { path: 'login', component: LoginComponent },
//   { path: 'add-user', component: AddUserComponent },
//   { path: 'list-user', component: ListUserComponent },
//   { path: 'edit-user', component: EditUserComponent },
//   { path: '*', component: LoginComponent }
// ];


//   { path: 'login', component: LoginComponent },
//   { path: 'add-user', component: AddUserComponent },
//   { path: 'list-user', component: ListUserComponent },
//   { path: 'edit-user', component: EditUserComponent },
//   { path: '*', component: LoginComponent }
// ];

// export class TestComponent implements OnInit {
//   constructor(private http: HttpClient) {
//     console.log('second');
//     this.getJSON().subscribe(data => {
//       let testData = data;
//       routes.push(testData);
//       console.log(routes);
//     });

//   }
//   ngOnInit() {
//     console.log('first');
//   }

//   public getJSON(): Observable<any> {
//     return this.http.get("https://api.myjson.com/bins/mfh63");
//   }
// }

export const routing = RouterModule.forRoot(routes); 

它表明没有找到特定的路线。如果需要任何具体的，请回复我会上传你的项目。

标签： javascriptc#jsonangularangular6