6

Usually I'd go like this in my component.

import { Router } from "@angular/router";

@Component({ ... })
export class CompyTheComponent {
  constructor(private router: Router) { 
    console.log(router.url);
  }
}

What if I want to obtain a reference of it without injecting it? I've tried to create it but died on all the parameters I couldn't figure out. Ans since it's not the usual (nor recommended) way to approach it, there's not much googlearch on it.

let routy : Router = new Router(...);
Konrad Viltersten
  • 36,151
  • 76
  • 250
  • 438
  • Why don't you want to inject it? – Zircon Aug 22 '17 at 17:45
  • @Zircon I'm curious if it **can** be done. I had once a static set up of helping methods and that's why the question arose. I do admit it's unusual approach. The question is rather academical than pragmatic. – Konrad Viltersten Aug 22 '17 at 17:49
  • Router is a complex provider that will require instantiate its all dependencies manually, too. Its dependencies include core stuff like compiler and injector, you will end up recreating the entire Angular app from scratch by hand. Possible in theory, a waste of time in practice. – Estus Flask Aug 22 '17 at 18:01
  • The router is set up as a service that is meant to be injected. I don't think that it is meant to be used except in the context of a service. Plus the router service manages the location bar, so it is very important that there is only ever one instance of it. – DeborahK Aug 22 '17 at 18:03
  • what do you want to do with the router? you can get the `router` from the `moduleInjector` using `.get` method – Max Koretskyi Aug 22 '17 at 19:09

2 Answers2

4

Make a file called injector.ts with the following code:

import { Injector } from "@angular/core";

let appInjectorRef: Injector;

export function appInjector (injector?: Injector): Injector {
    if (!injector) {
        return appInjectorRef;
    }
    appInjectorRef = injector;
    return appInjectorRef;
}

Then in your main.ts:

bootstrap([...]).then((appRef: { injector: Injector }) => appInjector(appRef.injector))
  .catch((err: Error) => console.error(err));

Then you can use it as:

const router: Router = appInjector().get(Router);

In any case, I'd recommend dependency injection over this.

EldarGranulo
  • 1,575
  • 1
  • 14
  • 37
  • 1
    This actually is injection, just not constructor injection, and a really roundabout way of doing it. Better to just do it the "normal" way. – GreyBeardedGeek Aug 22 '17 at 23:04
  • @GreyBeardedGeek What if you're just building a small library that needs access to a router instance? This approach has the benefit that you can use it inside of a function - you don't need to build an entire class just so you can have a constructor in which you can inject the router. – Philipp Doerner Dec 18 '20 at 15:59
1

As of Angular 14, you can also use the inject() function.

import { inject } from "@angular/core"
import { Router } from "@angular/router"

const router = inject(Router)
tbdrz
  • 1,811
  • 2
  • 12
  • 30