Prevent Default Routing - Angular 2

Question

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

it's not very clear what you want to do. Do you want to prevent the default behavior of a link having a click handler for instance ? — Ludohen, Mar 04 '16 at 11:00
`$scope.$on('$routeChangeStart', function(event, next, current){ })` In angular 1, _$routeChangeStart_ gives the event of the route change right? The same thing I need here in angular 2. I have used router subscribe for getting route changes. But I get only path name. — Abraham Gnanasingh, Mar 04 '16 at 11:12

score 0 · Answer 1 · edited May 23 '17 at 12:32

0

You can use the @CanActivate() to prevent route change.

See also Angular 2: Inject a dependency into @CanActivate? for current limitations.

edited May 23 '17 at 12:32

Community

1
1

answered Mar 04 '16 at 11:04

Günter Zöchbauer

623,577
216
2,003
1,567

Can you give a sample Javascript code for **CanActivate**? – Abraham Gnanasingh Mar 04 '16 at 11:28
It's not clear what your question is. See comments above. The linked question has answers with code. You can also check out https://github.com/angular/angular/issues/4112#issuecomment-153811572 – Günter Zöchbauer Mar 04 '16 at 11:29
My question is simple. I need to prevent back button navigation after logging in. In angular 1, **$routeChangeStart** gives the **event, next, prev** when route changes. The same thing I need here in angular 2. How can I do this? – Abraham Gnanasingh Mar 04 '16 at 11:41
You question doesn't contain anything about this. I think you should edit your question and add this. I don't know Angular1. Do you actually want to prevent the back button or do you want to manipulate where the back button leads to? Why do you need this? `@CanActivate()` provides prev and next and when you return `false` the navigation is cancelled. – Günter Zöchbauer Mar 04 '16 at 11:45
Now I understand. But I tried with the code `ng.router.CanActivate(function (next, prev) { return true; });`. It is not working. I cannot understand the **CanActivate** document clearly. Can you tell me the code to use **CanActivate** in Javascript? – Abraham Gnanasingh Mar 04 '16 at 11:59
I haven't used it myself yet and with Angular2 in JS I'm totally lost. I use only Dart. – Günter Zöchbauer Mar 04 '16 at 12:00
CanActivate seems to be the right solution, if you want to prevent the login page to show up when user is logged in, you have to do that check in this decorator, if auth return false else return true – Ludohen Mar 04 '16 at 12:02
@Ludohen Can you send me the Javascript code to use **CanActivate**? – Abraham Gnanasingh Mar 04 '16 at 12:45

score 0 · Accepted Answer · answered Mar 08 '16 at 12:18

0

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

answered Mar 08 '16 at 12:18

Thierry Templier

198,364
44
396
360

It is 100% working. Do I need to add `CanActivate` for every child component? Can I add `CanActivate` for **AppComponent** so that I can listen every time on route changes without need to add `CanActivate` for every child component? – Abraham Gnanasingh Mar 08 '16 at 13:02
Great! `CanActivate` must be defined for each component since it will allow the component to be instantiated or not... – Thierry Templier Mar 08 '16 at 13:09
Ok. Everything done. Thanks a lot for your help. I have learned a lot from you. Thank you – Abraham Gnanasingh Mar 08 '16 at 13:27
`CanActivate` is not working in angular 2 rc version. Can you give a correct code for this? – Abraham Gnanasingh May 16 '16 at 13:17

Prevent Default Routing - Angular 2

2 Answers2

Linked