防止默认路由 - Angular 2

Question

如何防止angular 2 中的默认 路由？在 router subscribe 中，我只得到路径名。我没有参与其中。 angular2中是否有其他服务商获取路由变更事件？

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

                   this.router.subscribe(function (pathname) {
                       //console.log(pathname);
                   });

            }],
        });

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

Answer 1

您可以使用 @CanActivate() 来防止路由更改。

另请参阅 Angular 2: Inject a dependency into @CanActivate? 以了解当前限制。

Answer 2

如果您想在纯 JS 中使用 CanActivate 装饰器，请执行以下操作：

var Child1Component = ng.core.Component({
  selector:'test',
  template: '<div>Test</div>'
}).Class({
  onSubmit: function(){
    console.log('onSubmit');
  }
});

ng.router.CanActivate((next, prev) => {
  // The Child1Component component is instantiated
  return true;

  // The Child1Component component isn't instantiated
  // return false;
})(Child1Component);

例如，在启动时，prev 参数为空，next 参数包含以下内容：

ComponentInstruction {
  urlPath: "child1",
  urlParams: Array[0],
  terminal: true,
  specificity: "2",
  params: Object…
}

防止默认路由 - Angular 2

Prevent Default Routing - Angular 2

angular2-directives

angular2-routing

angular