如何在不注入的情况下获取 Angular 路由器的实例？

Question

通常我会在我的组件中这样做。

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

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

如果我想在不注入它的情况下获取它的引用怎么办？我试图创建它，但死于我无法弄清楚的所有参数。 Ans 因为它不是通常（也不推荐）的方法来处理它，所以没有太多的 googlearch。

let routy : Router = new Router(...);

Answer 1

使用以下代码创建一个名为

injector.ts

的文件：

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

let appInjectorRef: Injector;

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

然后在你的

main.ts

：

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

然后您可以将其用作：

const router: Router = appInjector().get(Router); 无论如何，我建议在此之上进行依赖注入。

Answer 2

从 Angular 14 开始，您还可以使用

inject()

 功能。

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

const router = inject(Router)