2016-10-26 4 views
1

Ich mache ein Layout-Objekt, das mehrere Kinder hat und ich möchte das Elternobjekt das Routing für alle untergeordneten Objekte deklarieren - vorzugsweise nicht in meiner app.module.ts.Name nicht gefunden @Routes

Hier ist meine Auszeichnung für meine HomeLayoutComponent

<router-outlet name="body"></router-outlet> 
<router-outlet name="css"></router-outlet> 
<router-outlet name="header"></router-outlet> 
<router-outlet></router-outlet> 
<router-outlet name="footer"></router-outlet> 
<router-outlet name="scripts"></router-outlet> 

Da ist etwas los hier, aber ich habe die Stücke aus tauschen, weil ich 3 verschiedene Vorlagen für verschiedene Seiten haben mit verschiedenen CSS, verschiedene Skripte und sogar verschiedene Attribute auf dem <body> Tag.

jetzt das Typoskript für die HomeLayoutComponent

import { Component } from '@angular/core'; 
import { Routes } from '@angular/router'; 

import { HomeBodyComponent } from './home-body.component'; 
import { HomeCssComponent } from './home-css.component'; 
import { HomeHeaderComponent } from './home-header.component'; 
import { HomeContentComponent } from './home-content.component'; 
import { HomeFooterComponent } from './home-footer.component'; 
import { HomeScriptsComponent } from './home-scripts.component'; 

@Component({ 
    selector: 'home-layout', 
    template: require('./home-layout.component.html') 
}) 
@Routes([ 
     { path: '', component: HomeBodyComponent, outlet: 'body' }, 
     { path: '', component: HomeCssComponent, outlet: 'css' }, 
     { path: '', component: HomeHeaderComponent, outlet: 'header' }, 
     { path: '', component: HomeContentComponent }, 
     { path: '', component: HomeFooterComponent, outlet: 'footer' }, 
     { path: '', component: HomeScriptsComponent, outlet: 'scripts' } 
]) 
export class HomeLayoutComponent { 

} 

Mein Problem ist, dass @Routes mit dieser Fehlermeldung wird erroring:

Fehler TS2304: Kann nicht Namen 'Routen' gefunden.

Vielleicht mache ich das alles falsch und ich muss die Routen in die app.module. Ich wollte so viele Routen in dieser einen Datei vermeiden.

Nach Difference between router and router-deprecated in angular2 sollte ich Routes und nicht die RouterConfig verwenden, die ich auf praktisch jedem anderen Google-Ergebnis sehe.

Antwort

3

Dies ist nicht mehr wie Sie Routen erstellen. Jetzt müssen Sie das RouterModule verwenden und es mit den Routen konfigurieren. Routes ist immer noch ein Ding, aber es wird nicht als Dekorateur verwendet. Es ist der Typ, der an RouterModule.forRoot(Routes) übergeben werden sollte. So würden wir so etwas wie

import { RouterModule, Routes } from '@angular/router' 

const routes: Routes = [ 
    { path: '', component: HomeBodyComponent, outlet: 'body' }, 
    { path: '', component: HomeCssComponent, outlet: 'css' }, 
    { path: '', component: HomeHeaderComponent, outlet: 'header' }, 
    { path: '', component: HomeContentComponent }, 
    { path: '', component: HomeFooterComponent, outlet: 'footer' }, 
    { path: '', component: HomeScriptsComponent, outlet: 'scripts' } 
] 

@NgModule({ 
    imports: [ RouterModule.forRoot(routes) ], 
    bootstrap: [ AppComponent ] 
}) 
class AppModule {} 

Hier müssen wir die RouterModule in die AppModule importieren, rufen seine forRoot Methode, vorbei an der Routes. Wenn das Routing in einer anderen Datei ist, die es häufig ist, dann könnte man so etwas wie

app.routing.ts

const routes: Routes = [...] 

export const appRouting = RouterModule.forRoot(routes); 

app.module.ts

import { appRouting } from './app.routing' 

@NgModule({ 
    imports: [ appRouting ] 
}) 
class AppModule {} 

See tun auch:

+0

Bummer. Ich hatte gehofft, ich müsste nicht alle meine Routen im app.module.ts deklarieren. Ich nehme an, mit deinem Datei-Layout könnte ich sie in eine routes-Datei aufteilen, aber dann muss ich noch alle meine Komponenten deklarieren. Nicht ideal, wenn man annimmt, dass Winkel 1 nicht erforderlich ist, müssen Sie Ihre Controller und Direktiven "registrieren", um sie zu verwenden. – Josh

Verwandte Themen