angular 2 中的子路由

Question

这是我的 app.component.ts:

@RouteConfig([
    {path: '/', name: 'Home', component: HomePageComponent},
    {path: '/users/...', name: 'Users', component: UsersComponent},
    {path: '/posts', name: 'Posts', component: PostsComponent},
    {path: '/*others', redirectTo: ['Home']}
])

@Component({
    selector: 'my-app',
    templateUrl: 'app/app.template.html',
    styleUrls: ['app/app.style.css'],
    directives: [ROUTER_DIRECTIVES, PostsComponent, UsersComponent, HomePageComponent, AddUserComponent]
})
export class AppComponent {
    constructor(private router:Router) {
    }

    public isRouteActive(route) {
        return this.router.isRouteActive(this.router.generate(route))
    }
}

这里是users.component.ts:

@RouteConfig([
    {path: '/new', name: 'AddUser', component: AddUserComponent},
    {path: '/', name: 'FakePage', component: FakeComponent, useAsDefault: true},
])
@Component({
    selector: 'users',
    templateUrl: 'app/users.template.html',
    providers: [HTTP_PROVIDERS, ROUTER_PROVIDERS],
    directives: [ROUTER_DIRECTIVES],
    styles: [`.glyphicon-remove{color: #b20000;} a{text-decoration: none!important;}.btn-add-user{background: #2c3e52;color: white;margin-bottom: 10px}`]
})

export class UsersComponent {
    private _users:User;

    constructor(private _http:Http) {
        var headers = new Headers({"Access-Control-Allow-Methods": "GET,POST"});
        var options = new RequestOptions({
            headers: headers
        });

        var users = this._http.get('http://jsonplaceholder.typicode.com/users', options)
            .map(res => res.json()).subscribe(data=> {
                this._users = data
            });
    }
}

而users.template.html是这样的：

<h1>Users</h1>

<a class="btn btn-add-user" [routerLink]="['AddUser']">Add User</a>
<table class="table table-bordered">
    <thead>
    <tr>
        <th>Name</th>
        <th>Email</th>
        <th>Edit</th>
        <th>Delete</th>
    </tr>
    </thead>
    <tbody>
    <tr *ngFor="let user of _users">
        <td>{{user.name}}</td>
        <td>{{user.email}}</td>
        <td><a href="#" class="glyphicon glyphicon-edit"></a></td>
        <td><a href="#" class="glyphicon glyphicon-remove"></a></td>
    </tr>
    </tbody>
</table>

现在，当我访问 Users 页面时 chrome 控制台抛出错误：

Error: Component "AppComponent" has no route named "AddUser". at new BaseException (router-deprecated.umd.js:648) at RouteRegistry.exports.RouteRegistry.RouteRegistry._generate (router-deprecated.umd.js:2389) at RouteRegistry.exports.RouteRegistry.RouteRegistry.generate (router-deprecated.umd.js:2327) at RootRouter.exports.Router.Router.generate (router-deprecated.umd.js:2984) at RouterLink.exports.RouterLink.RouterLink._updateLink (router-deprecated.umd.js:3359) at RouterLink.set [as routeParams] (router-deprecated.umd.js:3371) at DebugAppView._View_UsersComponent0.detectChangesInternal (UsersComponent.template.js:146) at DebugAppView.AppView.detectChanges (core.umd.js:9996) at DebugAppView.detectChanges (core.umd.js:10084) at DebugAppView.AppView.detectViewChildrenChanges (core.umd.js:10016)

并且 Add User 按钮不起作用。

Answer 1

不要在每个组件上提供 ROUTER_PROVIDERS。它们只能在根组件或 bootstrap()

中提供一次

删除

ROUTER_PROVIDERS

来自您的 UserComponent 的 providers: [] 并将其添加到 AppComponent

提示

CORS headers

var headers = new Headers({"Access-Control-Allow-Methods": "GET,POST"});

必须由服务器添加以允许 CORS 请求。在客户端添加没有效果。

另见 Origin is not allowed by Access-Control-Allow-Origin

提供商

路由器添加的组件不需要添加到directives: [...]。只需要列出直接在模板中使用的指令（除非它们已经由 PLATFORM_DIRECTIVES 提供，例如 ngFor）

angular 2 中的子路由

Child routes in angular 2

angular2-routing

angular