prevent默认路由 - 2角 [英] Prevent Default Routing - Angular 2

问题描述

我怎么能 prevent默认的中角2路由？在 路由器订阅的，我只得到了路径名。我不是在它获得的事件。是否有角2任何其他服务供应商来获取路由变化事件？

app.component.js

 （功能（应用程序）{app.AppComponent = ng.core
        。零件（{
            选择：我的应用，
            templateUrl：应用程序/视图/ main.html中，
            指令：[ng.router.ROUTER_DIRECTIVES]
            viewProviders：[ng.http.HTTP_PROVIDERS]
        }）
        。类（{
            构造函数：[ng.router.Router，ng.http.Http，功能（路由器，HTTP）{                   this.router.subscribe（功能（路径）{
                       //console.log(pathname）;
                   }）;            }]，
        }）;ng.router
        .RouteConfig（[
          {路径：/登录，分量：app.LoginComponent，名称：登录，useAsDefault：真正}，
          {路径：'/待办事项，成分：app.TodosComponent，名称：托多斯}，
        ]）（app.AppComponent）;}）（window.app ||（window.app = {}））;
 

boot.js

 （功能（应用程序）{    document.addEventListener（'DOMContentLoaded'，函数（）{
        ng.platform.browser.bootstrap（app.AppComponent，[ng.router.ROUTER_PROVIDERS，ng.core.provide（ng.router.LocationStrategy，{useClass：ng.router.HashLocationStrategy}）]）;
    }）;}）（window.app ||（window.app = {}））;
 

解决方案

如果你想使用 CanActivate 装饰纯JS，你就以下内容：

  VAR Child1Component = ng.core.Component（{
  选择：测试，
  模板：'＆LT; D​​IV＆GT;测试与LT; / DIV＆GT;'
}）。类（{
  的onSubmit：功能（）{
    的console.log（'的onsubmit'）;
  }
}）;ng.router.CanActivate（（接下来，preV）=＆GT; {
  //该Child1Component组件实例
  返回true;  //该Child1Component组件不实例化
  //返回false;
}）（Child1Component）;
 

例如，在启动时， $ P $光伏参数为空和接下来一个包含以下

  ComponentInstruction {
  urlPath：child1
  urlParams：数组[0]
  终端：真实，
  特异性：2
  params：一个对象...
}
 

How can I prevent default the routing in angular 2? In router subscribe, I get only the path name. I am not getting event in it. Is there any other service provider in angular 2 to get the route change event?

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

解决方案

If you want to use the CanActivate decorator in plain JS, you do the following:

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

For example, at startup, the prev parameter is null and the next one contains the following:

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

这篇关于prevent默认路由 - 2角的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！