Question

您好我正在尝试为我的角度应用创建子路径，这是我到目前为止所拥有的：

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>

这是 CatalogComponent ：

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 {

}

这是目录视图：

<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中添加了一个router-outet，在catalog.view中添加了一个router-outlet。如果我删除了第二个路由器 - 应用程序，则显示的根目录设置为

http://localhost:6554/Catalog/Templates

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

有谁知道我做错了什么？

Answer 1

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

Angular 2子路径freezez应用

1 个答案: