Угловое 2 ребенка маршруты freezez приложений

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) 
     }) 
    } 
} 

Проблема заключается в том, что, когда я загружаю страницу замерзает.

Я предполагаю, что это происходит, потому что я добавил один маршрутизатор в commerceify.view и один маршрутизатор в каталоге catalog.view. Если удалить второй маршрутизатор-выход следующих приложений отображаемая корень получает значение

http://localhost:6554/Catalog/Templates

Это правильно, но но не называя код TemplateComponent. Кроме того, я хочу, чтобы указать, где будет отображаться код шаблона.оценки, у родительской категории будет структура меню.

Кто-нибудь знает, что я делаю неправильно?

Answer 1

ROUTER_PROVIDERS должны быть добавлены только bootstrap(AppComponent, [ROUTER_PROVIDERS]), но не на каждый компонент, в противном случае создается новый экземпляр всех вводимых типов создается для каждого компонента, даже если глобальный экземпляр должен быть передан в.