ANGULAR2 ROUTES没有靴子

Question

新路由器（3.0.0）提供provideRouter函数，该函数采用类型为RouterConfig的数组参数...

官方开发人员指南通过引导const提供教程。例如：

export const APP_ROUTER_PROVIDERS = [ provideRouter(routes) ];

我只想将其作为class

引导

--> client.ts引导程序文件

...
import {APP_ROUTER} from './app/app.routes';
...

bootstrap(AppComponent, [HTTP_PROVIDERS, APP_ROUTER, ...]);

--> app.route.ts路由文件

import {Injectable} from '@angular/core';
import { provideRouter, RouterConfig } from '@angular/router';
import { somecomponents }; 

@Injectable()
export class APP_ROUTER {

  constructor(
    RouterConfig: RouterConfig

  ) {   
    this.ROUTE_prov = [provideRouter(this.prov)];

  }
    public ROUTE_prov;
    public prov : RouterConfig = [
    { path: '/', component: HomePageComponent },
    { path: 'home', component: HomePageComponent },
    { path: 'about', component: AboutPageComponent },
    { path: 'landing', component: LandingPageComponent },
    { path: 'pp/:nickName', component: PersonalPageComponent },
    { path: 'carlos', component: CarlosPageComponent },
    { path: '**', redirectTo: 'home' }
    ];
}

我收到此错误...未加载路线：

Answer 1

router-config.ts

import {provideRouter, RouterConfig} from '@angular/router';


export const APP_ROUTES : RouterConfig = [
    {path: '', component: AppComponent},
    // more paths
];

export const APP_ROUTE_PROVIDERS = [
    provideRouter(APP_ROUTES)  
];

main.ts

bootstrap(AppComponent, [HTTP_PROVIDERS, APP_ROUTER_PROVIDERS, ...]);

Answer 2

发表评论后请尝试：

import {Injectable} from '@angular/core';
import { provideRouter, RouterConfig } from '@angular/router';
import { somecomponents }; 

@Injectable()
export class APP_ROUTER {

  constructor(
  ) {   
    this.ROUTE_prov = [provideRouter(this.prov)];

  }
    public ROUTE_prov;
    public prov : RouterConfig = [
    { path: '/', component: HomePageComponent },
    { path: 'home', component: HomePageComponent },
    { path: 'about', component: AboutPageComponent },
    { path: 'landing', component: LandingPageComponent },
    { path: 'pp/:nickName', component: PersonalPageComponent },
    { path: 'carlos', component: CarlosPageComponent },
    { path: '**', redirectTo: 'home' }
    ];
}

然后在你的main.ts中：

bootstrap(AppComponent, [HTTP_PROVIDERS, RouterConfig, APP_ROUTER, ...]);