Angular 2 路由确实按预期工作

Question

我正在尝试了解 angular 中的路由。我构建了一个非常简单的应用程序，它完全是关于路由的。我发现很难理解将 <route-outlet></route-outlet>

放在哪里

应用程序的工作应该是这样的：

我在浏览器控制台上遇到的错误：

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.

这是我目前编写的代码：

1) 登录组件

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) 注册组件

import {Component} from 'angular2/core'; 

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

}

3) 主页组件

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) 图书组件

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

因为错误消息告诉add ... 表明路由组件有子路由

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

Answer 2

我找到了解决方案。

app.component 是根应用程序...在其中我想要 home.component 进一步将 book.component 和 contactus.component 作为其子路由

如你所说，我在 app.component 中添加了 ...，例如 path:"/home/..."
在模板中的 home.component 中，我修复了我的路由器链接，例如， [routerLink]="['./Books']"..注意书籍前的./..它意味着 "Books" 是一个子路由……"Contactus" 也是如此。在 home.component 的 @RouteConfig 中，我提到了没有 / 的路径 比如，path: 'books'.

成功了！！ ;)

代码如下：

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

Angular 2 路由确实按预期工作

Angular 2 routing does work as expected

typescript

angular2-routing

angular