Angular 通过组件导航-角度2

我可以使用[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 = {}));

(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 = {}));

(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 = {}));

boot.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 = {}));

(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 = {}));

(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 = {}));

login.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 = {}));

(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 = {}));

(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 = {}));

---

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

<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>

---

这是相应的提示：。

您是否尝试过使用

这个.router.navigate（['Todos'））

而不使用

/

？是的，我尝试过。这也会产生同样的问题。另外，我已经尝试通过注入ng.router.location来使用这个.location.go（'/todos'）。在这种情况下，URL已正确更改，但未加载组件。我仍然停留在登录页面。

this.router.parent.navigate（['Todos']）

可能是另一个选项。我自己还不知道如何发送邮件：-/如果您删除/注释

/login

发送邮件，会发生什么情况？您能看到这一点并告诉我在提交表单并导航到下一页时出现错误的原因吗。