-2

我正面临这个非常普遍的问题。试图向组件注入服务。但是得到这个 Can't resolve all parameters for VehicleComponent 错误。不知道为什么会这样。尝试将@Inject 放在依赖参数上，尝试在其他模块中提供，在组件本身中提供但没有用。试图注入 NavigationControllerService。顺便说一句，我可以将服务注入我的应用程序组件。

这是我的应用程序模块。这里提供服务

import { AppComponent } from "./app.component";
import { AppRoutingModule } from './app.routing.module';
import HomeComponent from './ngComponents/home/home.component';
import { VehicleModule } from './ngComponents/vehicle/vehicle.module';
import { DataTableComponent } from './uiComponents/datatable/datatable.component';
import { AppConfigService } from './services/appConfig.service';
import { VehicleHTTPService } from './services/http/vehicleHTTP.service';

import { HttpClientModule } from '@angular/common/http';
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { CommonModule } from "@angular/common";
import { TabComponent } from "./uiComponents/tab/tab.component";
import { NavigationControllerService } from "./services/navigation/navigationController.service";


@NgModule({
    declarations: [AppComponent, HomeComponent],
    imports: [BrowserModule, CommonModule, AppRoutingModule, HttpClientModule, VehicleModule],
    providers: [AppConfigService, VehicleHTTPService, NavigationControllerService],
    bootstrap: [AppComponent],
    entryComponents: [TabComponent]
})
export class AppModule {

}

车辆模块

import { NgModule } from "@angular/core";
import { VehicleRoutingModule } from "./vehicle.routing.module";
import { VehicleListComponent } from "./vehicleList/vehicleList.component";
import { VehicleComponent } from "./vehicle.component";
import { VehicleFormComponent } from "./vehicleForm/vehicleForm.component";
import { VehicleHTTPService } from "../../services/http/vehicleHTTP.service";
import { HttpClientModule } from "@angular/common/http";
import { DataTableComponent } from "../../uiComponents/datatable/datatable.component";
import { CommonModule } from "@angular/common";

@NgModule({
    imports: [CommonModule, VehicleRoutingModule],
    declarations: [VehicleComponent, VehicleListComponent, VehicleFormComponent, DataTableComponent],

})
export class VehicleModule {

}

和我试图注入的车辆组件。

import { NavigationControllerService } from "../../services/navigation/navigationController.service";
import { Component } from "@angular/core";
import { ActivatedRoute } from "@angular/router";

@Component({
    selector: "vehicle",
    templateUrl: 'vehicle.component.html',
    styleUrls: ['vehicle.component.css']
})
export class VehicleComponent {
    constructor(public navigationControllerService: NavigationControllerService) {

    }
}

您可以从这里访问完整项目https://github.com/aliemre1990/dokuzisik-mean 感谢您的帮助。

编辑：我认为问题是由 NavigationControllerService 引起的。我创建了一个空的服务类并在我的 AppModule 上提供它，以使相同的服务实例在整个应用程序中可用。在车辆组件上，此空服务按预期注入。但在我看来，navigationcontrollerservice 再次无法创建，也无法注入。我应该调查为什么它不能创建导航控制器服务的实例。也许它关于其构造函数中提供的依赖项。我也在提供我的导航控制器服务。

import { EventEmitter, Injectable, Injector, ApplicationRef, ComponentFactoryResolver, EmbeddedViewRef, ComponentRef } from "@angular/core";
import { TabComponent } from "../../uiComponents/tab/tab.component";
import { VehicleComponent } from "../../ngComponents/vehicle/vehicle.component";
import { VehicleFormComponent } from "../../ngComponents/vehicle/vehicleForm/vehicleForm.component";

@Injectable()
export class NavigationControllerService {

    readonly tabContentContainerClass = "tab-content-container";
    readonly tabNavigationContainerClass = "tab-navigation-container";

    public openComponents: Array<ComponentRef<TabComponent>>;


    constructor(private componentFactoryResolver: ComponentFactoryResolver,
        private appRef: ApplicationRef,
        private injector: Injector) {
        this.openComponents = [];
    }

    public closeCurrent() {

    }

    private deActiveAll() {
        this.openComponents.forEach(x => x.instance.active = false);
    }

    private navigate(component: any) {

        var compRef = this.openComponents.find(x => x.instance.component === component);
        if (compRef) {
            this.deActiveAll();
            compRef.instance.active = true;
        }
        else {
            this.add(VehicleComponent);
        }


        var compRef = this.openComponents.find(x => x.instance.component === component);
        switch (compRef.instance.component) {
            case VehicleComponent:
                compRef.instance.title = "Araç Listesi";
                break;
            default:
                compRef.instance.title = "Default";
                break;
        }

    }

    private add(component: any) {

        const componentRef = this.componentFactoryResolver
            .resolveComponentFactory(TabComponent)
            .create(this.injector);

        // 2. Attach component to the appRef so that it's inside the ng component tree
        this.appRef.attachView(componentRef.hostView);


        // 3. Get DOM element from component
        const domElem = (componentRef.hostView as EmbeddedViewRef<any>)
            .rootNodes[0] as HTMLElement;

        // 4. Append DOM element to the body
        document.querySelector("." + this.tabContentContainerClass).appendChild(domElem);


        if (componentRef.instance.navigateComponent)
            componentRef.instance.navigateComponent(component);

        componentRef.instance.active = true;

        this.openComponents.push(componentRef);
    }



    public navigateVehicleComponent() {
        this.navigate(VehicleComponent);
    }
    public navigateVehicleFormComponent() {
        this.navigate(VehicleFormComponent);
    }
}

再次编辑：我将我的项目转移到 angular-cli，它给出了循环依赖警告。我的 vehicleCompnent 依赖于 navigationController 并且 navigationController 使用了 vehicleComponent。从导航控制器中删除车辆组件解决了这个问题。

4

1 回答 1

1

也许你的 angular-cli 应该升级

于 2018-02-28T08:24:33.053 回答