Question

我试图获得一个在Angular2中使用参数的简单路线。我使用Angular 2.0.0-rc.2 和角度路由器 3.0.0-alpha.7 。我的大部分内容都直接基于路由here

的更新文档

的index.html

<!doctype html>
  <html>
    <head>
      <base href=".">
      ...

main.ts

import { bootstrap } from '@angular/platform-browser-dynamic';
import { AppComponent } from './app';
import { HTTP_PROVIDERS } from '@angular/http';
import { APP_ROUTER_PROVIDERS } from './app/app.routes';

bootstrap(AppComponent, [
    HTTP_PROVIDERS,
    APP_ROUTER_PROVIDERS
])
    .catch(err => console.error(err))
;

app.routes.ts

export const routes: RouterConfig = [
    { path: 'featured',       component: FeaturedPageComponent },
    { path: 'containers/:id', component: ContainerEditComponent }
];

export const APP_ROUTER_PROVIDERS = [
    provideRouter(routes)
];

容器edit.component.ts

@Component({
    moduleId: module.id,
    selector: 'container-edit',
    templateUrl: 'container-edit.component.html',
    styleUrls: ['container-edit.component.css']
})
export class ContainerEditComponent implements OnInit, OnDestroy {
    private sub: any;

    constructor(
        private route: ActivatedRoute,
        private router: Router
    ) {
    }

    ngOnInit() {
        this.sub = this.route.params.subscribe(params => {
            let id = +params['id']; // + converts string to number
            console.log(id);
        });
    }

    ngOnDestroy() {
        this.sub.unsubscribe();
    }
}

当我点击http://localhost:4200/containers/1337时，我收到以下错误。

异常：错误：未捕获（承诺）：错误：无法匹配任何路线：＆＃39; 1337＆＃39;

Answer 1

更新答案：

在index.html中将基数设置为<base href="/" />。 angular2文档推动你使用<base href="." />，因为在他们的英雄项目中他们专门使用router.navigate这是好事，因为它迫使你从默认路线开始然后从那里开始编写历史记录。

但在某些情况下，如果您希望用户能够直接前往特定路径，那么您必须使用/

原始答案：

检查你的路径，你有意改变它吗？样本不包括“应用程序”。子目录。

import { AppComponent } from './app/'; <--- check this
import { HTTP_PROVIDERS } from '@angular/http';
import { APP_ROUTER_PROVIDERS } from './app/app.routes'; <--- and this

为什么这条带有params的路线在Angular2中工作？

1 个答案: