Question

当使用弃用的路由器时，我能够执行router.config并传入一个对象。事实上，路由器本身在应用程序启动后得到了一点配置，该对象具有相同的“模板”，就像我使用了@RouterConfig一样。我正在寻找的是，如果有一种方法来配置这样的新路由器。正在查看文档但我有点不知所措，因为它还没有记录。

由于回答而编辑

不，我不能使用@Routes。事情是我在构建路由器后加载配置。以下是我使用旧路由器的方式：

var currentStep = 1;

function nextStep() {

if (currentStep ===1){
		
        $("#petmain1").hide();
		$("#petmain2").show();
		$("#addproduct").show();
		$("#firstimage").hide();
		$("#secondimage").show();
		currentStep = 2;
		console.log("Current step is " + currentStep);
        
	}else if(currentStep ===2){
		
		$("#petmain2").hide();
		$("#addproduct").hide();
		$("#secondimage").hide();
		$("#petmain3").show();
		$("#thirdimage").show();
		$("#firstimage").hide();
		currentStep === 3;
		console.log("Current step is " + currentStep);
		
	}

}
function prevStep() {
	

if (currentStep ===2){
        $("#petmain1").show();
		$("#petmain2").hide();
		$("#addproduct").hide();
		$("#firstimage").show();
		$("#secondimage").hide();
		currentStep = 1;
		console.log("Current step is " + currentStep);
	}else if(currentStep === 3){
		$("#petmain3").hide();
		$("#thirdimage").hide();
		$("#secondimage").show();
		$("#petmain2").show();
		$("#addproduct").show();
		currentStep === 2;
		console.log("Current step is " + currentStep);
	}

}

正如您所看到的，我正在构建一个json对象（RouterComponents），然后将其发送到路由器。我正在寻找一种方法来对新路由器做同样的事情，或类似的东西。

Answer 1

在新路由器中>= RC.3）https://angular.io/docs/ts/latest/api/router/index/Router-class.html resetConfig可以使用

router.resetConfig([
 { path: 'team/:id', component: TeamCmp, children: [
   { path: 'simple', component: SimpleCmp },
   { path: 'user/:name', component: UserCmp }
 ] }
]);

您可能需要提供一些虚拟路由器配置，以便在应用程序启动时不会出现错误。

https://github.com/angular/angular/issues/11437#issuecomment-245995186提供 RC.6 Plunker

Answer 2

我觉得它更好：

在main.ts中：

import { ROUTER_PROVIDERS } from 'angular2/router';

bootstrap(AppComponent, [
    ROUTER_PROVIDERS,
    provide(LocationStrategy, { useClass: HashLocationStrategy })
]);

在你的component.ts中：

import { Router, RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS } from 'angular2/router';
import { APP_ROUTES } from './route.config';

@RouteConfig(APP_ROUTES)

创建一个文件route.config.ts：

import { Route } from 'angular2/router';

import { HomeComponent } from './home/home.component';
import { TableComponent } from './table/table.component';

export var Routes = {
    home: new Route({
        path: '/home',
        component: HomeComponent,
        name: 'Home',
        useAsDefault: true,
        data: {
            title: 'Home'
        }
    }),
    table: new Route({
        path: '/table/:table',
        component: TableComponent,
        name: 'Table'
    })
};

export const APP_ROUTES = Object.keys(Routes).map(r => Routes[r]);

Answer 3

事实上，简而言之，您需要使用@Routes而不是@RouterConfig。这是一个示例：

@Routes([
  {path: '/crisis-center', component: CrisisListComponent},
  {path: '/heroes',        component: HeroListComponent},
  {path: '*',        component: CrisisListComponent}
])
export class AppComponent { }

有关详细信息，请参阅angular.io上的此文档：

https://angular.io/docs/ts/latest/guide/router.html

您可以注意到，由于本章是正在进行的工作，因此本文档中仍存在一些拼写错误; - ）

新的Angular2路由器配置

3 个答案: