Typescript Angular 2布线按预期工作

我试图理解angular 2中的路由。我构建了一个非常简单的应用程序，它完全是关于路由的。我发现很难理解在哪里放置

应用程序的工作方式应如下所示：

浏览器控制台上出现的错误：

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 {

}

---

正如错误消息告诉add

…

指出路由组件具有子路由一样

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

---

正如错误消息告诉add

…

指出路由组件具有子路由一样

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

我找到了解决办法

app.component是根app…在它里面我想要home.component，它还有book.component和contactus.component作为它的子路由

正如您正确地说的，我在app.component中添加了

…

，比如，

path:“/home/…”

在home.component模板中，我修复了routerlink，如下所示：，

[routerLink]=“['./Books']”

…请注意书本前面的

/

这意味着“书籍”是一条儿童路线……而“联系我们”也是如此。 在home.component的

@RouteConfig

中，我提到了路径，但没有/ 比如，

路径：“书籍”

成功了！！；）

代码如下：

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

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

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

从'angular2/core'导入{Component}；
从“./component/home.component”导入{HomeComponent}；
从“./component/books.component”导入{BooksComponent}；
从“angular2/ROUTER”导入{RouteConfig，ROUTER_指令}；
@线路图([
{路径：'/books'，名称：'books'，组件：BooksComponent}，
{path:'/home/…'，name:'home'，component:HomeComponent}，
{路径：'/*other'，名称：'other'，重定向到：['Register']}
])
@组成部分({
选择器：“我的应用程序”，
模板：`
`,
指令：[路由器指令，HomeComponent，CartComponent]
})
导出类AppComponent{}

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

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

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

从'angular2/core'导入{Component}；
从“angular2/ROUTER”导入{RouteConfig，ROUTER_指令}；
从“./books.component”导入{BooksComponent}；
从“/contactus.component”导入{ContactusComponent}；
@线路图([
{path:'books'，name:'books'，component:BooksComponent，useAsDefault:true}，
{路径：'contactus'，名称：'contactus'，组件：ContactusComponent}
])
@组成部分({
选择器：“主页”，
模板：`
买书
联系我们
`,
指令：[路由器指令、BookComponent、ContactsComponent]
})
导出类HomeComponent{}

我找到了解决方案

app.component是根app…在它里面我想要home.component，它还有book.component和contactus.component作为它的子路由

正如您正确地说的，我在app.component中添加了

…

，比如，

path:“/home/…”

在home.component模板中，我修复了routerlink，如下所示：，

[routerLink]=“['./Books']”

…请注意书本前面的

/

这意味着“书籍”是一条儿童路线……而“联系我们”也是如此。 在home.component的

@RouteConfig

中，我提到了路径，但没有/ 比如，

路径：“书籍”

成功了！！；）

代码如下：

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

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

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

从'angular2/core'导入{Component}；
从“./component/home.component”导入{HomeComponent}；
从“./component/books.component”导入{BooksComponent}；
从“angular2/ROUTER”导入{RouteConfig，ROUTER_指令}；
@线路图([
{路径：'/books'，名称：'books'，组件：BooksComponent}，
{path:'/home/…'，name:'home'，component:HomeComponent}，
{路径：'/*other'，名称：'other'，重定向到：['Register']}
])
@组成部分({
选择器：“我的应用程序”，
模板：`
`,
指令：[路由器指令，HomeComponent，CartComponent]
})
导出类AppComponent{}

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

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

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

从'angular2/core'导入{Component}；
从“angular2/ROUTER”导入{RouteConfig，ROUTER_指令}；
从“./books.component”导入{BooksComponent}；
从“/contactus.component”导入{ContactusComponent}；
@线路图([
{path:'books'，name:'books'，component:BooksComponent，useAsDefault:true}，
{路径：'contactus'，名称：'contactus'，组件：ContactusComponent}
])
@组成部分({
选择器：“主页”，
模板：`
买书
联系我们
`,
指令：[路由器指令、BookComponent、ContactsComponent]
})
导出类HomeComponent{}

是否准备好移动到rc？路由器已更改，但旧的路由器目前仍然可用，因为“@angular/router已弃用”。是否准备好移动到rc？路由器已更改，但旧的路由器现在仍然可用，因为“@angular/router已弃用”。您更改了什么？比较你的问题和答案来找出真正解决问题的方法有点麻烦。app.component是根app…在它里面我想要home.component，它还有book.component和contactus.component作为它的子路由1）正如你正确地说的，我在app.component中添加了

…

，比如

路径：“/home/…”

2）在home.component中，我在模板中修复了我的routerlink，比如，

[routerlink]=“['./Books']”

…注意书籍前面的

/

…这意味着“Books”是一个子路由…对于“Contactus”也是如此。在home.component的

@RouteConfig

中，我提到了没有/like的路径，

路径：'books'

。成功了！！；）你改变了什么？比较你的问题和答案来找出真正解决问题的方法有点麻烦。app.component是根app…在它里面我想要home.component，它还有book.component和contactus.component作为它的子路由1）正如你正确地说的，我在app.component中添加了

…

，比如

路径：“/home/…”

2）在模板中的home.component中