通过组件导航 - Angular 2

Question

我可以使用 [routerLink] 在 View 中完美导航。当我尝试使用 this.router.navigate(['/Todos']) 或 this.router.navigateByUrl('/todos') 浏览组件时，最初路由器正确更改为 index.html#/todos 然后路由器自动更改为 index.html? #/登录。我不知道为什么会这样。谁能帮我？提前致谢。

app.component.js

(function (app) {

app.AppComponent = ng.core
        .Component({
            selector: 'my-app',
            templateUrl: 'app/views/main.html',
            directives: [ng.router.ROUTER_DIRECTIVES],
            viewProviders: [ng.http.HTTP_PROVIDERS]
        })
        .Class({
            constructor: [ng.router.Router, ng.http.Http, function (router, http) {

            }],
        });

ng.router
        .RouteConfig([
          { path: '/login', component: app.LoginComponent, name: 'Login', useAsDefault: true },
          { path: '/todos', component: app.TodosComponent, name: 'Todos' },
        ])(app.AppComponent);

})(window.app || (window.app = {}));

boot.js

(function (app) {

    document.addEventListener('DOMContentLoaded', function () {
        ng.platform.browser.bootstrap(app.AppComponent, [ng.router.ROUTER_PROVIDERS, ng.core.provide(ng.router.LocationStrategy, { useClass: ng.router.HashLocationStrategy })]);
    });

})(window.app || (window.app = {}));

login.js

(function (app) {

    app.LoginComponent = ng.core
            .Component({
                selector: 'login',
                templateUrl: 'app/views/login.html',
            })
            .Class({
                constructor: [ng.router.Router, function (router) {
                    this.router = router;
                }],
                onSubmit: function (form, user) {
                    this.router.navigate(['/Todos']);
                    //this.router.navigateByUrl('/todos');
                },
            });

})(window.app || (window.app = {}));

Answer 1

根据您的最新评论，我认为您的问题与您提交表单的方式有关：

<form #simpleForm="ngForm" novalidate>
  <div>
    <input type="text" placeholder="Name"
           [(ngModel)]="user.name" ngControl="name"
           #name="ngForm" required />
  </div>
  <button type="submit" (click)="onSubmit(simpleForm, user)">Login</button>
</form>

您应该直接利用表单上的 submit 事件，如下所述：

<form #simpleForm="ngForm" (submit)="onSubmit(simpleForm, user)">
  <div>
    <input type="text" placeholder="Name"
           [(ngModel)]="user.name" ngControl="name"
           #name="ngForm" required />
  </div>
  <button type="submit">Login</button>
</form>

这里是对应的plunkr：https://plnkr.co/edit/w61Ecbmuj7EfDnsYEHOS?p=preview.

通过组件导航 - Angular 2

Navigation Through Component - Angular 2

angular2-directives

angular2-routing

angular