2

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

包含编译错误的示例：

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

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

4

2 回答 2

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;
}
于 2016-01-23T12:43:06.563 回答
0

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

希望能帮助到你！

于 2016-01-21T09:49:38.680 回答