Не удается разрешить все параметры компонента

aliemre спросил: 03 февраля 2018 в 10:25 в: angular

Я столкнулся с этой довольно распространенной проблемой. Попытка ввести услугу компоненту. Но получение этого Невозможно разрешить все параметры для ошибки 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 {}

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 вводится как ожидалось. Но навигационный диспетчерский сервис снова, на мой взгляд, не может быть создан и не может быть введен. Я должен обратить внимание на то, почему он не может создать экземпляр службы навигации. Возможно, это о зависимостях, предоставляемых внутри его конструктора. Я также добавляю свой сервис навигационного контроллера.

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);
    }
}

Изменить еще раз: я перенес проект в угловое cli, и он дал круговое предупреждение о зависимости. Мой vehicleCompnent зависит от navigationController и navigationController использует vehicleComponent. Удаление устройства VehicleComponent с контроллера навигации решило проблему.

0 ответов