无法解析组件的所有参数

Question

我面临这个非常普遍的问题。试图向组件注入服务。但是，获得此功能无法解决所有参数的所有参数，以解决车辆的错误错误。不知道为什么会发生。试图将@inject放在依赖项参数上，试图在其他模块中提供，并在组件本身中提供但无效。试图注入导航通用服务。顺便说一句，我可以将服务注入我的应用程序组件。

这是我的应用模块。该服务在这里提供

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

vericlemodule

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感谢您的帮助。

编辑：我认为无法解决导致ControllerService引起的问题。我创建了一个空的服务类，并将其提供在AppModule上，以在整个应用程序上提供相同的服务实例。在车辆组件上，这项充满预期的服务注入。但是，我认为无法创建NavigationControllerService，也无法注入。我应该觉得为什么它不能创建导航controller Service的实例。也许它关于其构造函数中提供的依赖关系。我也放置了导航控制器服务。

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，并发出了循环依赖性警告。我的车辆机构依赖于导航控制器，而导航控制器则使用vericlecomponent。从导航控制器中删除车辆成分解决了问题。

Answer 1

也许您的Angular-CLI应该升级