Angular 2 中的动态路由加载失败.(测试版) [英] Dynamic Route Loading in Angular 2 Fails. (Beta)

问题描述

我想从以 JSON 格式获取的服务动态加载 @RouteConfig 的路由，

<预><代码>[{ "path" : "/about" , "name" : "About" , "component" : "AboutComponent" },{ "path" : "/contact" , "name" : "Contact" , "component" : "ContactComponent" }]

以下是将其推入RouteDefinition Array的代码，

for (let i = 0; i 

'component':data[i].component 需要 Classname，因为它通过 String 类接收它.如何将包含类名的字符串转换为类??

我也尝试过使用 Route 类:

this.routeConfigArray.push(new Route({path: data[i].path, name: data[i].name, component:data[i].component}));

控制台错误:

<块引用>

路由/about"的组件未定义，或者不是一个类.我尝试了很多方法，比如使用 eval("new "+data[i].component+"()); || new window[data[i].component] .

我被困在这个问题上，真的很困惑如何解决这个问题.

解决方案

TypeScript 以某种方式将 import 编译成 javascript，你可以尝试这样的事情，以便能够使用 eval()(畏缩).如果打字稿以不同方式编译，这显然不起作用，但检查这是否有效很有趣:)

for (let i = 0; i 

附录

作为使用 AsyncRoute 的您自己的解决方案的补充，我相信您实际上得到了一个很好的解决方案.或许，如果您以某种方式放置所有页面，则可以从 path 中提取 resource 位置，但这不是必需的.(我的意思是从 path 字符串 /about 到 resource 字符串 ./app/about/about.component 使用小算法应该不难.但这可能需要更新.

无论如何，您可以使用 AsyncRoute

尝试类似的操作

警告:前面未经测试的代码

让路由:any[] = [{ "path" : "/about" , "name" : "About" , "component" : "AboutComponent", "route": "/About" , "resource" : "./app/about/about.component"},{ "path": "/contact", "name": "Contact", "component": "ContactComponent", "route": "/Contact", "resource": "./app/contact/contact.component"}];route.forEach((route : any) => {this.routeConfigArray.push(新的异步路由({路径:route.path，加载器:() =>System.import(route.resource).then(m => m[route.component]),名称:路线名称}));});this._router.config(this.routeConfigArray);

I want to load routes for the @RouteConfig Dynamically from a service which fetches in format JSON,

[
  { "path" : "/about" , "name" : "About" , "component" : "AboutComponent" },
  { "path" : "/contact" , "name" : "Contact" , "component" : "ContactComponent" }
]

Following is the code for pushing it into the RouteDefinition Array,

for (let i = 0; i < data.length; i++) {
  //console.log(data[i].path+" "+data[i].name+" "+data[i].component);
  this.routeConfigArray.push({ //routeConfigArray : RouteDefinition
    'path': data[i].path,
    'name': data[i].name,
    'component': data[i].component
  });
  this._router.config(this.routeConfigArray);   // THIS FAILS TO CONFIG PATHS ON ROUTER
}

The 'component':data[i].component requires Classname, where as it recieves a it via a String class. How do i convert the string containing classname into a class??

Also i have tried the Route class using :

this.routeConfigArray.push(new Route({path: data[i].path, name: data[i].name, component:data[i].component}));

Console Error:

Component for route "/about" is not defined, or is not a class. i have tried numerous ways like using eval("new "+data[i].component+"()); || new window[data[i].component] .

I am stuck at this and really confused as to how to resolve this.

解决方案

TypeScript compiles imports into javascript in a certain way, you can try something like this to be able to use eval() (cringe). This obviously won't work if typescript compiles differently, but it is fun to check out if this works any ways :)

for (let i = 0; i < data.length; i++) {
  this.routeConfigArray.push({ //routeConfigArray : RouteDefinition
    path: data[i].path,
    name: data[i].name,
    component: getComponent(data[i].component)
  });
  this._router.config(this.routeConfigArray);   
}

function getComponent(comp : string) : Function {
    //convert camelCase to underscore notation
    let component : string = comp;
    component = component[0].toLowerCase() + component.slice(1);
    component = component.replace(/([A-Z])/g, function(match) {
        return '_' + match.toLowerCase();
    });
    component += '_1';
    return eval(component[comp])
}

ADDENDUM

As addition to your own solution with using a AsyncRoute, I believe you actually got quite a good solution going on. Perhaps if you place all the pages in a certain way, you can extract the resource location from the path, but that is not necessary. (i mean to get from the path string /about to the resource string ./app/about/about.component shouldn't be hard with a small algorithm. But that might be something for an update.

Anyways, you can try something like this with the AsyncRoute

warning: untested code ahead

let routes : any[] = [
    { "path" : "/about" , "name" : "About" , "component" : "AboutComponent", "route": "/About" , "resource" : "./app/about/about.component" },
    { "path" : "/contact" , "name" : "Contact" , "component" : "ContactComponent", "route": "/Contact" , "resource" : "./app/contact/contact.component" }
];

routes.forEach((route : any) => {
    this.routeConfigArray.push(
        new AsyncRoute({
            path : route.path,
            loader : () => System.import(route.resource).then(m => m[route.component]),
            name : route.name
        })
    );
});

this._router.config(this.routeConfigArray);

这篇关于Angular 2 中的动态路由加载失败.(测试版)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！