【问题标题】:Angular 2 RC Final - Dynamically loading route data from serviceAngular 2 RC Final - 从服务中动态加载路线数据
【发布时间】:2016-11-04 10:08:08
【问题描述】:

我正在尝试从服务加载路由数据并在 Angular 2 RC Final 中自动生成路由。我看到您可以通过 Router.Module.forRoot() 函数分配路由数据,但看不到将获取的数据分配给该函数的方法。我尝试了下面的代码,但得到一个“属性'forRoot'不存在类型'RouterModule'错误”。

我可能完全不合时宜,但代码应该大致显示我想要实现的目标。应用程序路径是:mysite.com/london/mysite.com/new-york/ 等。有没有办法做到这一点?

我使用的路由器版本是:"@angular/router": "~3.0.1"

app.module.ts:

import { NgModule, OnInit  } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { AppComponent } from './app.component';
import { RouterModule } from '@angular/router';
import { PathService } from './path.service';
import { Path } from './path';

@NgModule({
    imports: [
        BrowserModule,
        FormsModule,
        HttpModule,
        RouterModule
    ],
    declarations: [
        AppComponent
      ],
    providers: [
        PathService
    ],
    bootstrap: [ AppComponent ]
})
export class AppModule implements OnInit {
    private ROUTES: Array<Object>;
    private paths: Path[];

    constructor(
        @Inject(RouterModule) private _routerModule: RouterModule,
        @Inject(PathService) private _pathService: PathService) {}

    ngOnInit() {
        this.getPathData();
    }

    getPathData() {
        this._pathService.getPaths().subscribe((paths: Path[]) => this.paths = paths, (err: any) => { }, () => this.generateRoutes());
    }

    generateRoutes() {
        this.ROUTES = 'do something to this.paths and assign route date here';

        this._routerModule.forRoot(this.ROUTES);
    }
}

JSON:

[
    {
        id: "1",
        name: "London",
        path: "london"
    },
    {
        id: "2",
        name: "New York",
        path: "new-york"
    },
    {
        id: "3",
        name: "Paris",
        path: "paris"
    },
    {
        id: "4",
        name: "Tokyo",
        path: "tokyo"
    }
]

【问题讨论】:

  • 我最终通过在路由模块中使用path: ":city" 解决了我自己的问题。这只会处理任何被扔向它的城市。

标签: javascript angular typescript angular2-routing


【解决方案1】:

不确定,因为这似乎很前沿。最接近您想要的是延迟加载路线。这是一个非常简单的演示。路由在首次按需访问时加载。

我怀疑它是否有帮助,但值得一试:)

https://github.com/danday74/angular2-router-modular/blob/master/app/app-routing.module.ts

【讨论】:

  • 感谢您的回复。但是,我不确定延迟加载是否是我需要的。在我的应用程序中,我有一个以 JSON 格式输出网站部分的 API。例如,作为位置名称。这些位置名称也是应用 URL 中的路径名称。例如mysite.com/london/ 和 mysite.com/new-york/。我正在寻找一种从 JSON 中获取这些位置名称并为应用程序生成路由的方法。位置名称的数量可以变化,并在应用程序的后端进行更新,理想情况下会自动传播到 RouterModule。
  • 您可以使用 mysite.com/location/:city ... 如果城市有效,则使用定位路线 --- 如果城市无效,则使用 notfound 组件 - 也许这会满足您的需求(或重定向到未找到的组件)
  • 但是是否可以设置它以使除了数据库和 JSON 输出之外没有静态数据或对位置的引用?理想情况下,应用程序应该是通用的,因此如果位置发生变化,则无需创建/删除文件/文件夹。
  • 我会做 ... mysite.com/location/:city ... 简单的实现是转到定位路线。从 route.params 获取城市...然后对城市进行 HTTP 请求(以获取完整的城市信息)...如果 404 则重定向到 NotFoundComponent 否则显示城市...更好的选择是在如果城市不存在,路由器级别将阻止提供位置路由,从而无需重定向/路由器状态(路由)更改
  • 是的,这听起来像是一种可能的解决方案。我们应用程序的规范意味着我必须执行 mysite.com/:city。我实际上只是在路由模块中尝试了 /:city,页面组件中的数据处理 .ts 并且它起作用了!
猜你喜欢
  • 2017-02-02
  • 2017-03-24
  • 2019-08-19
  • 1970-01-01
  • 2017-12-20
  • 2017-12-14
  • 2019-05-07
  • 2017-09-28
  • 2019-02-05
相关资源
最近更新 更多