3

我正在使用 Angular 4，我正在尝试使用一些外部数据动态设置路由。基于通过互联网提供的一些解决方案，我试图通过调用动态加载路由： this.router.config.unshift({path:'base',component:BaseComponent,data:this.rcs.getRouteData('base')});
这rcs只是一个服务 - 一些数据的（提供者）要传递给在此路径上调用的组件。

但是，如果我尝试从其他组件动态设置相同的路由路径（即，通过router->config->unshift从 AppComponent (app.component.ts) 以外的其他组件调用方法），则路由不起作用。在这种情况下，如果我尝试路由到动态设置的路径，它会返回到设置的组件"**"（基本上是在没有找到匹配的路径配置时应该显示的组件。

我在这里遗漏了什么吗，如何从 AppComponent 以外的任何其他组件动态加载角度路径。

代码： app.component.ts ：

import {Component} from '@angular/core';
import{DataService} from './services/data.service';
import {Item} from './components/item/item';
import {BaseComponent}from './components/base/base.component';
import {ItemData} from './components/item/item-data';
import {ProcessContextService} from './services/context/process-context.service';
import {RouteCfgService} from './services/routing/route-cfg.service';
import {Router} from '@angular/router';
@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.scss'],
})
export class AppComponent {

  public  constructor(private pcs:ProcessContextService,private dataservice:DataService, private router:Router,private rcs: RouteCfgService){
  this.rcs.setRoutes();
  alert("datatosetis ROOTC CONTROLLER:"+JSON.stringify(this.rcs.getRouteData('base')));
  this.router.config.unshift({path:'base',component:BaseComponent,data:this.rcs.getRouteData('base')});
  console.log("THE ROUTER CONFIG IS:");
  console.log(this.router.config);
    }

}

app.component.html

<router-outlet></router-outlet>

路由模块

    import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import {PageNotFoundComponent} from '../../components/page-not-found/page-not-found.component';
import {RootcComponent}from '../../components/rootc/rootc.component';
import {IdeComponent}from '../../components/architect/ide/ide.component'
import { MngOrgComponent } from '../../components/architect/mng-org/mng-org.component';
import {BaseComponent}from '../../components/base/base.component';
import { DataStoreViewComponent } from '../../components/architect/data-store-view/data-store-view.component';

const routes: Routes = [
      {
       path:'login',
       component:RootcComponent
      },  {
           path:'ide',
           component:IdeComponent,
           children:[
                     {
                         path: 'setuporg',
                         component: MngOrgComponent,
                         outlet: 'ideolet'
                       }, {
                            path: 'datastoreview',
                            component: DataStoreViewComponent,
                            // outlet: 'ideolet'
                          },
                           // {
                           //     path: 'basecomponent',
                           //     component: BaseComponent,
                           //     // outlet: 'ideolet'
                           //   }
                    ]
    },
  {
    path: '',
    redirectTo:'/login',
    pathMatch:'full'
  },
   {
      path: '**',
      component:PageNotFoundComponent,
      pathMatch:'full'
    },


];

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

0 回答 0