typescript - Angular 2子路由卡住应用程序

Question

您好，我正在尝试为我的 Angular 应用程序创建子路由，这是我目前所拥有的:

import {bootstrap}    from 'angular2/platform/browser'
import {CommercifyComponent} from './commercify.component'
import {ROUTER_PROVIDERS } from 'angular2/router';
import {HTTP_PROVIDERS} from 'angular2/http';

bootstrap(CommercifyComponent, [
    ROUTER_PROVIDERS,
    HTTP_PROVIDERS
]);

@Component({
    selector: 'commercify',
    templateUrl: './app/commercify.view.html',
    directives: [ROUTER_DIRECTIVES],
})
@RouteConfig([     
    { path: '/Catalog/...', name: 'Catalog', component: CatalogComponent, useAsDefault: true },     
])            
export class CommercifyComponent {}   

这是commercify.view.html

  <router-outlet></router-outlet>

这是目录组件:

import {Component} from 'angular2/core';
import {ROUTER_DIRECTIVES, RouteConfig } from 'angular2/router';
import {TemplatesComponent} from './components/templates.component';

@Component({
templateUrl: './app/catalog/catalog.view.html',
directives: [ROUTER_DIRECTIVES]
})

@RouteConfig([
    { path: '/Templates', name: 'Templates', component: TemplatesComponent, useAsDefault: true },
])
export class CatalogComponent {

}

这是目录 View :

<nav>Navigation will be here</nav>
<router-outlet name="Catalog"></router-outlet>

这是模板组件:

@Component({
    selector: 'templates',
    template: 'This is templates component'
})
export class TemplatesComponent implements OnInit {
    private templateDataService: TemplateDataService;

    public settings = <CatalogViewModel.TemplateSettings>{
        templatesToSkip: 0,
        templatesToTake: 0
    }

    constructor(templateDataService: TemplateDataService) {
        this.templateDataService = templateDataService;
    }

    public ngOnInit() {
        this.getTemplates();
    }

    private getTemplates() {
        this.templateDataService.getAllByRange(this.settings.templatesToSkip, this.settings.templatesToTake).subscribe(x => {
            console.log(x)
        })
    }
}

问题是当我加载页面时卡住。

我假设发生这种情况是因为我在 commercify.view 中添加了一个路由器导出，在 catalog.view 中添加了一个路由器导出。如果我删除第二个路由器 socket ，则显示的根设置为

http://localhost:6554/Catalog/Templates

这是正确的，但它没有调用 TemplateComponent 代码。此外，我希望能够指定 template.view 代码的显示位置，因为父类别将具有菜单结构。

有人知道我做错了什么吗？

Answer 1

ROUTER_PROVIDERS 应该只添加到 bootstrap(AppComponent, [ROUTER_PROVIDERS]) 而不是在每个组件上，否则会为每个组件创建所有注入(inject)类型的新实例即使应该传入全局实例。