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