通过组件导航-角度2

Question

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

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。