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屋!