Question

我面对这个非常普遍的问题。尝试将服务注入组件。但是，这不能解决VehicleComponent错误的所有参数。不知道为什么会发生这种情况。试图将@Inject放在依赖参数上，尝试在其他模块中提供，在组件本身提供但没有工作。试图注入NavigationControllerService。顺便说一句，我可以将服务注入我的应用程序组件。

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

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 {

}

VehicleModule

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上提供它，以便在整个应用程序中提供相同的服务实例。在车辆组件上，此emtpty服务按预期注入。但在我看来，导航控制器服务再次无法创建，无法注入。我应该研究为什么它不能创建navigationcontroller服务的实例。也许是关于其构造函数中提供的依赖项。我也提供导航控制器服务。

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。从导航控制器中删除vehicleComponent解决了这个问题。

Answer 1

也许你的角度cli应该升级

无法解析组件

1 个答案: