Angular 2 Routing funktioniert wie erwartet

Question

Ich versuche zu verstehen, Routing in eckigen 2. Ich habe eine wirklich einfache Anwendung, die alles über Routing ist. Ich finde es schwierig, zu verstehen, wo <route-outlet></route-outlet>

Die Arbeitsweise der Anwendung platzieren sollte wie:

Fehler ich auf Browser-Konsole erhalten:

EXCEPTION: Error during instantiation of Router! (RouterOutlet -> Router). 
Error during instantiation of Router! (RouterOutlet -> Router). 
EXCEPTION: Child routes are not allowed for "/home". Use "..." on the parent's route path. 
Child routes are not allowed for "/home". Use "..." on the parent's route path. 

Dies ist was ich bisher codiert habe:

1) LoginCo mponent

import {Component} from 'angular2/core'; 

import {RouterLink} from 'angular2/router'; 

@Component({ 
    selector: 'login', 
    template: ` 
     <h1>Login page</h1> 
     <a [routerLink] = "['Home']">Login</a> 
     <a [routerLink] = "['Signup']">New user? Sign up now!</a> 
` 

, 
    directives: [RouterLink] 
}) 
export class LoginComponent { 

} 

2) SignupComponent

import {Component} from 'angular2/core'; 

@Component({ 
    selector: 'signup', 
    template: ` 
      <h1>Signup page</h1> 
      <input type="submit" value="Signup"/> 
    ` 
}) 
export class SignupComponent { 

} 

3) HomeComponent

import {Component} from 'angular2/core'; 

import {RouteConfig, RouterLink, RouterOutlet} from 'angular2/router'; 

import {BookComponent} from './book.component'; 
import {ContactusComponent} from './contactus.component'; 

@RouteConfig([ 
    { path: '/book', name: 'Book', component: BookComponent}, 
    { path: '/contactus', name: 'Contactus', component: ContactusComponent} 
]) 
@Component({ 
    selector: 'home', 
    template: ` 
      <h1>Home page</h1> 
      <a [routerLink] = "['Book']">Books</a> 
      <a [routerLink] = "['Contactus']">Contact us</a> 
      <router-outlet></router-outlet> 
    `, 
    directives: [RouterLink, RouterOutlet] 
}) 
export class HomeComponent { 

} 

4) BookComponent

import {Component} from 'angular2/core'; 

@Component({ 
    selector: 'book', 
    template: ` 
      <h4>List of books</h4> 
    ` 
}) 
export class BookComponent { 

} 

5) ContactusComponent

import {Component} from 'angular2/core'; 

@Component({ 
    selector: 'contactus', 
    template: ` 
      <h4>Contact us</h4> 
    ` 
}) 
export class ContactusComponent { 

} 

5) app.component.ts

import {Component} from 'angular2/core'; 
import {RouteConfig, ROUTER_DIRECTIVES} from 'angular2/router'; 

import {LoginComponent} from './login.component'; 
import {SignupComponent} from './signup.component'; 
import {HomeComponent} from './home.component'; 

@RouteConfig([ 
    { path: '/login', name: 'Login', component: LoginComponent, useAsDefault: true}, 
    { path: '/signup', name: 'Signup', component: SignupComponent}, 
    { path: '/home', name: 'Home', component: HomeComponent}, 
    { path: '/*other', name: 'Other', redirectTo: ['Login']} 
]) 
@Component({ 
    selector: 'my-app', 
    template: ` 

      <router-outlet></router-outlet> 
     `, 
     directives: [ROUTER_DIRECTIVES] 
}) 
export class AppComponent { } 

6) boot.ts

import {bootstrap} from 'angular2/platform/browser' 
import {AppComponent} from './app.component' 
import {ROUTER_PROVIDERS} from 'angular2/router' 

bootstrap(AppComponent, ROUTER_PROVIDERS); 

Answer 1

Ich fand die Lösung.

app.component ist die Wurzel App ... in ihm ich home.component die weiter hatte book.component und contactus.component als Kind Route

1. Wie Sie zu Recht gesagt, habe ich wollte ... in app.component wie path:"/home/..."

2. in home.component in der Vorlage ich meine Routerfest wie [routerLink]="['./Books']" .... beachten sie die ./ vor den Büchern .... es bedeutet, dass die „Bücher“ ist ein Kind Route ... und gleiches für "Contactus". In home.component's @RouteConfig erwähnte ich den Pfad ohne a/ wie, path: 'books'.

   Es hat funktioniert !! ;)

Der Code ist unten:

app.component.ts

import {Component} from 'angular2/core'; 
import {HomeComponent} from './component/home.component'; 
import {BooksComponent} from './component/books.component'; 
import {RouteConfig, ROUTER_DIRECTIVES} from 'angular2/router'; 

@RouteConfig([ 
    { path: '/books', name: 'Books', component: BooksComponent}, 
    { path: '/home/...', name: 'Home', component: HomeComponent}, 
    { path: '/*other', name: 'Other', redirectTo: ['Register']} 
]) 
@Component({ 
    selector: 'my-app', 
    template: ` 
      <router-outlet></router-outlet> 
     `, 
    directives: [ROUTER_DIRECTIVES, HomeComponent, CartComponent] 
}) 

export class AppComponent {} 

home.component.ts

import {Component} from 'angular2/core'; 

import {RouteConfig ,ROUTER_DIRECTIVES} from 'angular2/router'; 

import {BooksComponent} from './books.component'; 
import {ContactusComponent} from './contactus.component'; 

@RouteConfig([ 
    { path: 'books', name: 'Books', component: BooksComponent, useAsDefault: true}, 
    { path: 'contactus', name: 'Contactus', component: ContactusComponent} 
]) 
@Component({ 
    selector: 'home', 
    template: ` 

     <a [routerLink]="['./Books']">Buy books</a> 
     <a [routerLink]="['./Contactus']">Contact us</a> 
     <router-outlet></router-outlet> 

`, 
    directives: [ROUTER_DIRECTIVES, BooksComponent, ContactusComponent] 
}) 
export class HomeComponent {} 

Answer 2

Da die Fehlermeldung ... sagt hinzufügen, um anzuzeigen, dass die geroutet Komponente Kind Routen

hat

{ path: '/home/...', name: 'Home', component: HomeComponent},