Angular 2路由确实按预期工作

Question

我正在尝试理解角度2中的路由。我构建了一个非常简单的应用程序，它都是关于路由的。我发现很难理解放置#define MANAGED_PUB public #define MANAGED_REF ref MANAGED_PUB MANAGED_REF class Class1 { // TODO: Add your methods for this class here. };

的位置

应用程序的工作应该是：

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

<route-outlet></route-outlet>

这是我到目前为止编码的内容：

1）LoginComponent

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.

2）SignupComponent

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 {

}

3）HomeComponent

import {Component} from 'angular2/core'; 

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

}

4）BookComponent

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 {

}

5）ContactusComponent

import {Component} from 'angular2/core';

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

}

5）app.component.ts

import {Component} from 'angular2/core';

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

}

6）boot.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 { }

Answer 1

由于错误消息告诉添加bucket = session.Bucket(bucket_name) try : bucket.upload_file(Key=s3_key, Filename=source_path) os.remove(source_path) except : raise 以指示路由组件具有子路由

bucket.upload_file(
     Key=s3_key, 
     Filename=source_path, 
     extra_args={'Metadata': {'source_path': source_path}}
) 

Answer 2

我找到了解决方案。

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

1. 正如您所说，我在app.component中添加了...，例如path:"/home/..."

2. 在模板中的home.component中，我修复了我的routerlink， [routerLink]="['./Books']" ....请注意书籍之前的./ .... 意味着＆＃34;书籍＆＃34;是一个儿童路线...和＃34; Contactus＆＃34;相同。 在home.component＆＃39; s @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 {}