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控制台会抛出错误：

错误：组件＆＃34; AppComponent＆＃34;没有名为＆＃34; AddUser＆＃34;的路线。 at new BaseException（router-deprecated.umd.js：648）在RouteRegistry.exports.RouteRegistry.RouteRegistry._generate（router-deprecated.umd.js：2389）在RouteRegistry.exports.RouteRegistry.RouteRegistry.generate（router-deprecated.umd.js：2327）在RootRouter.exports.Router.Router.generate（router-deprecated.umd.js：2984）在RouterLink.exports.RouterLink.RouterLink._updateLink（router-deprecated.umd.js：3359）在RouterLink.set [as routeParams]（router-deprecated.umd.js：3371）在DebugAppView._View_UsersComponent0.detectChangesInternal（UsersComponent.template.js：146）在DebugAppView.AppView.detectChanges（core.umd.js：9996）在DebugAppView.detectChanges（core.umd.js：10084）在DebugAppView.AppView.detectViewChildrenChanges（core.umd.js：10016）

并且Add User按钮无法正常工作。

Answer 1

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

中提供一次

删除

ROUTER_PROVIDERS

来自您providers: []的{{1}}并将其添加到UserComponent

<强>提示

CORS标题
```
AppComponent
```

必须由服务器添加

以允许CORS请求。在客户端添加它们没有任何效果。

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

提供商

无需向路由器添加的var headers = new Headers({"Access-Control-Allow-Methods": "GET,POST"});添加组件。只需要列出模板中直接使用的指令（除非它们已由directives: [...]提供，例如PLATFORM_DIRECTIVES）

儿童路线有角度2

1 个答案: