Question

必须从外部json文件配置路由器

包含编译错误的示例：

@RouteConfig([{
    path: '/dashboard', name: 'Dashboard', component: 'Dashboard'
}])

注意组件：'Dashboard' - 这是错误的。组件字段必须是Type类型。另一种方法是使用Router.config（）方法，但我不知道如何使用它。我试过了，但我做不到。是否有可能在Anular2路由器？在angular1中，我可以将控制器名称指定为字符串值。

Answer 1

我通过使用简单的打字稿装饰器解决了这个问题。

/***
 * Routing components storage
 * @type {Map<string, Function>}
*/
export var routingComponents = new Map<string, Function>();

/***
 * Decorator function
 * @returns {function(any): *}
 * @constructor
*/
export function RoutingComponent(name?: string) {
    return function (target:any) {
        routingComponents.set(name || target.name, target);
        return target;
    }
}

如何使用装饰器

@Component({ selector: '', template: '' })
@RoutingComponent()
export class Dashboard {
    constructor(){}
}

接下来，我们可以创建RouteDefinition实例

private makeRoute(metadataItem: any): RouteDefinition {
    let component = routingComponents.get(metadataItem.name);
    if (!component) {
        component = CleanComponent;
    }

    var route: RouteDefinition = {
        name: metadataItem.name,
        path: metadataItem.url,
        useAsDefault: metadataItem.default,
        component: component
    };

    return route;
}

Answer 2

如果您想使用Router.config()，可以按以下步骤操作：

1）在主要组件中，在变量中定义路线：

  private myMainRoutes: RouteDefinition[] = [
    { path:      '',
      component: HomeCmp,
      name:      'HomeCmp'
    },
    { path:      'dashboard',
      component: DashboardCmp,
      name:      'DashboardCmp'
    },
    { path:      'error',
      component: ErrorCmp,
      name:      'ErrorCmp'
    },
    { path:      '**',
      redirectTo: ['ErrorCmp']
    }
  ];

2）使用Router dep在主组件构造函数中使用该变量。注射。

class MainCmp  {
  private myMainRoutes: RouteDefinition[] =  ... ; // from above

  constructor(private router_: Router) {
    router_.config(this.myMainRoutes);
  }
}

希望它有所帮助！

如何配置组件名称为字符串类型的Angular2路由器？

2 个答案: