注入 Angular 2 路由器不起作用答案

【问题标题】：Injecting Angular 2 Router not working注入 Angular 2 路由器不起作用
【发布时间】：2023-08-13 01:54:01
【问题描述】：

我之前发布了一个关于 DI 的问题，此后我在这里发现了同样的问题。我不知道是我在做什么还是我的开发设置？

我试图将路由器注入组件。我的包含模块看起来像这样

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { Router } from '@angular/router';

import { LoginComponent }  from './login.component';

import { User } from '../user/user';

@NgModule({
  imports:      [ BrowserModule, FormsModule, Router ],
  declarations: [ LoginComponent ],
  bootstrap:    [ LoginComponent ]
})

export class LoginModule { }

这是我的组件

import { Component } from '@angular/core';
import { Inject } from '@angular/core';
import { Router } from '@angular/router';

import { User } from '../user/user';

@Component({
  templateUrl: './login.template.html'
})

export class LoginComponent { 
    user = new User( "", "" );
    submitted:boolean = false;
    inProgress:boolean = false;

    constructor ( private router : Router ) {

    } 

}

当我运行应用程序时，我收到以下错误

Can't resolve all parameters for LoginComponent

我的构建过程如下：

运行 inline-angular-compiler（将 templateUrl 嵌入到实际的 js 文件中）运行 tsc（将 ts 转换为 js）

我听说运行 typescript 转换器会导致 DI 问题，但有什么替代方法？

编辑：

我的路由器设置

import { Routes, RouterModule } from '@angular/router';

import { AppComponent } from './app.component';
import { DashboardComponent } from './dashboard/dashboard.component';

import { UserRoutes } from './user/user.routing';
import { DashboardRoutes } from './dashboard/dashboard.routing';
import { LoginRoutes } from './login/login.routing';

const routes: Routes = [
    ...UserRoutes,
    ...DashboardRoutes,
    ...LoginRoutes,
    //this needs to redirect to a homepage
    {path:'', component: DashboardComponent}
];

export const appRoutingProviders: any[] = [

];

export const routing = RouterModule.forRoot( routes );

【问题讨论】：

你的路由配置在哪里？您应该将 RouterModule 而不是 Router 导入到您的导入中。
我正在尝试使用 router.navigate。所以我不认为导入 RouterModule 会起作用？我有一个标准的路由器设置，但我把它添加到上面以供参考@MadhuRanjan
在NgModule 中添加Router 到imports 绝对是错误的。不要将 TypeScript 导入与模块导入混为一谈。您需要在AppModule 中导入routing (RouterModule.forRoot(routes))。我在您的问题中没有看到此代码。我也认为你应该在NgModule 的LoginModule 中导入RouterModule。

标签： angular dependency-injection angular-ui-router

【解决方案1】：

好的，所以我做了一些阅读，结果发现某些 typescript 编译器不会像 Angular 推荐的 tsc 那样对待 Angular DI。我以前一直在使用自己的构建过程，它使用了不同类型的脚本编译器。

解决方案是将我的构建过程恢复为使用 angular 推荐的构建过程。一个非常奇怪且难以诊断的问题。

感谢大家的帮助。

【讨论】：