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

Question

有必要从外部json-文件

配置路由器

包含编译错误的示例：

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

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

Answer 1

如果您想使用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);
  }
}

希望对您有所帮助！

Answer 2

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

/***
 * 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;
}

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

How do I configure the Angular2 router that component name was of type string?

angular

angular2-routing