javascript - 单击另一个组件后无法解决组件中的参数错误

Question

我收到此错误:

core.js:1624 ERROR Error: Uncaught (in promise): Error: Can't resolve all parameters for GroupAddComponent: ([object Object], [object Object], ?, [object Object], [object Object], [object Object]).
Error: Can't resolve all parameters for GroupAddComponent: ([object Object], [object Object], ?, [object Object], [object Object], [object Object]).
    at syntaxError (compiler.js:215)

我们有一个 AngularJS 和 Angular 6 混合应用程序。到目前为止，我已经拥有三个 Angular 6 组件。每当我单击最新的组件 ManageProgramComponent，然后返回并单击其他两个组件 GroupAddComponent 或 GroupEditComponent 时，我都会得到上面的错误。但是，每当我单击任一 Group 组件，然后单击 ManageProgramComponent 时，一切都会正常。

GroupComponents 使用相同的模块，即:

import { NgModule, ModuleWithProviders } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { CommonModule } from '@angular/common';
import { Routes, RouterModule } from '@angular/router';

import { MatDatepickerModule } from '@angular/material/datepicker';
import {
    DateAdapter,
    MAT_DATE_FORMATS,
    MAT_DATE_LOCALE
} from '@angular/material/core';
import { MomentDateAdapter } from '@angular/material-moment-adapter';
import { MatFormFieldModule, MatInputModule } from '@angular/material';
import { MatNativeDateModule } from '@angular/material';
import { HttpClientModule } from '@angular/common/http';

import { GroupEditComponent } from '../components/group-edit.component';
import { GroupAddComponent } from '../components/group-add.component';
import { DATE_FORMATS } from '../models/group';
import { GroupService } from '../services/group.service';
import { ApiService } from '../services/api.service';
/* import { SpinLoaderComponent } from '../components/spin-loader.component'; */
import { ProgramService } from '../services/program.service';

const routes: Routes = [
    { path: 'add-flow', component: GroupAddComponent },
    { path: 'add/:program', component: GroupAddComponent },
    { path: ':id', component: GroupEditComponent }
];

export const routing: ModuleWithProviders = RouterModule.forChild(routes);

@NgModule({
    imports: [
        routing,
        CommonModule,
        FormsModule,
        ReactiveFormsModule,
        MatFormFieldModule,
        MatInputModule,
        MatDatepickerModule,
        MatNativeDateModule,
        HttpClientModule
    ],
    declarations: [GroupEditComponent, GroupAddComponent],
    providers: [
        {
            provide: 'Util',
            useFactory: ($injector: any) => $injector.get('Util'),
            deps: ['$injector']
        },
        {
            provide: 'Session',
            useFactory: ($injector: any) => $injector.get('Session'),
            deps: ['$injector']
        },
        {
            provide: '$location',
            useFactory: ($injector: any) => $injector.get('$location'),
            deps: ['$injector']
        },
        GroupService,
        ProgramService,
        ApiService,
        {
            provide: DateAdapter,
            useClass: MomentDateAdapter,
            deps: [MAT_DATE_LOCALE]
        },
        { provide: MAT_DATE_FORMATS, useValue: DATE_FORMATS }
    ]
})
export class GroupModule {}

程序模块:

import { NgModule, ModuleWithProviders } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { CommonModule } from '@angular/common';
import { Routes, RouterModule } from '@angular/router';
import { HttpClientModule } from '@angular/common/http';
import { MatTooltipModule } from '@angular/material/tooltip';
/* import { SpinLoaderComponent } from '../components/spin-loader.component'; */
import { ToolBoxComponent } from '../components/tool-box.component';
import { ManageProgramComponent } from '../components/manage-program/manage-program.component';
import { GroupService } from '../services/group.service';
import { ProgramService } from '../services/program.service';
import { ApiService } from '../services/api.service';

const routes: Routes = [{ path: ':id', component: ManageProgramComponent }];

export const routing: ModuleWithProviders = RouterModule.forChild(routes);

@NgModule({
    imports: [
        routing,
        CommonModule,
        FormsModule,
        ReactiveFormsModule,
        MatTooltipModule,
        HttpClientModule
    ],
    declarations: [ManageProgramComponent, ToolBoxComponent],
    providers: [
        {
            provide: 'Util',
            useFactory: ($injector: any) => $injector.get('Util'),
            deps: ['$injector']
        },
        {
            provide: 'Session',
            useFactory: ($injector: any) => $injector.get('Session'),
            deps: ['$injector']
        },
        {
            provide: '$location',
            useFactory: ($injector: any) => $injector.get('$location'),
            deps: ['$injector']
        },
        GroupService,
        ProgramService,
        ApiService
    ]
})
export class ProgramModule {}

主应用模块:

import './polyfills';
import 'core-js/es7/reflect';
import 'zone.js';
import * as angular from 'angular';

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { UpgradeModule, setAngularLib } from '@angular/upgrade/static';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { SpinLoaderComponent } from './components/spin-loader.component';

setAngularLib(angular);
import app from './main/app';

import { RootComponent } from './root.component';
import {
    RouterModule,
    Routes,
    Router,
    UrlHandlingStrategy
} from '@angular/router';

export class Ng1Ng2UrlHandlingStrategy {
    shouldProcessUrl(url: any) {
        return (
            url.toString().startsWith('/group/') ||
            url.toString().startsWith('/group-test/') ||
            url.toString().startsWith('/manage-program/')
        );
    }

    extract(url: any) {
        return url;
    }

    merge(url: any, whole: any) {
        return url;
    }
}

const routes: Routes = [
    {
        path: 'group',
        loadChildren: './modules/group.module#GroupModule'
    },
    {
        path: 'manage-program',
        loadChildren: './modules/program.module#ProgramModule'
    }
];

@NgModule({
    exports: [RouterModule]
})
export class AppRoutingModule {}

@NgModule({
    imports: [
        BrowserModule,
        RouterModule.forRoot(routes),
        UpgradeModule,
        BrowserAnimationsModule
    ],
    providers: [
        { provide: UrlHandlingStrategy, useClass: Ng1Ng2UrlHandlingStrategy }
    ],
    declarations: [RootComponent],
    entryComponents: [RootComponent],
    bootstrap: [RootComponent]
})
export class AppModule {
    constructor(private upgrade: UpgradeModule) {}
    ngDoBootstrap() {}
}

export function setUpLocationSync(ngUpgrade: UpgradeModule) {
    if (!ngUpgrade.$injector) {
        throw new Error(`
        RouterUpgradeInitializer can be used only after UpgradeModule.bootstrap has been called.
        Remove RouterUpgradeInitializer and call setUpLocationSync after UpgradeModule.bootstrap.
      `);
    }

    const router: Router = ngUpgrade.injector.get(Router);
    const url = document.createElement('a');

    ngUpgrade.$injector
        .get('$rootScope')
        .$on('$locationChangeStart', (_: any, next: string, __: string) => {
            url.href = next;
            router.navigateByUrl(url.pathname);
        });
}

const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule).then(platformRef => {
    const upgrade = platformRef.injector.get(UpgradeModule) as UpgradeModule;
    upgrade.bootstrap(document.body, [app.name], { strictDi: true });
    setUpLocationSync(upgrade);
});

组添加组件:

import { Component, OnInit, Input, Inject } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

import { GroupService } from '../services/group.service';
import { Group } from '../models/group';
import { ApiService } from '../services/api.service';
import { ProgramService } from '../services/program.service';
declare var jQuery;

@Component({
    templateUrl: './views/components/group-add.component.html'
})
export class GroupAddComponent implements OnInit {
    @Input() groups: Group[] = [new Group()];
    @Input() selectedGroup: Group;
    @Input() groupSelectedForRemove: Group;
    $location;
    Session;
    @Input() program: any = {};
    @Input() sites;
    private previousGroups = [];
    loading: boolean = false;
    currentYear: any = new Date().getFullYear();
    private programFlowData: any;

    constructor(
        private route: ActivatedRoute,
        private _groupService: GroupService,
        private _programService: ProgramService,
        private apiService: ApiService,
        @Inject('$location') $location: any,
        @Inject('Session') Session: any
    ) {
        this.$location = $location;
        this.Session = Session;
    }

    ngOnInit(): void {
        this.selectedGroup = this.groups[0];
        const program_id = this.route.snapshot.paramMap.get('program');
        if (program_id) {
            this.apiService
                .get('program/' + program_id)
                .subscribe(program => (this.program = program));

            this.apiService
                .get<any>('site', {
                    where: JSON.stringify({ program: program_id })
                })
                .subscribe(sites => {
                    this.sites = sites._items;
                    let sites_id = [];
                    for (var i = 0; i < this.sites.length; i++)
                        sites_id.push(this.sites[i]._id);
                    let params = {
                        where: JSON.stringify({ site: { $in: sites_id } })
                    };
                    this.apiService
                        .get<any>('group', params)
                        .subscribe(groups => {
                            this.previousGroups = groups._items;
                            this.setupJoyride();
                        });
                });
        } else {
            //add program flow
            let programFlowData;
            try {
                let programDataRaw = sessionStorage.getItem(
                    'program-flow-data'
                );
                sessionStorage.removeItem('program-flow-data');
                programFlowData = JSON.parse(programDataRaw);
                this.programFlowData = programFlowData;
                this.sites = programFlowData.sites.map(site => ({
                    name: site
                }));
                this.program.name = programFlowData.name;
                this.setupJoyride();
            } catch (e) {
                this.$location.path('add-program');
            }
        }
    }

    setupJoyride() {
        let self = this;
        jQuery(function($) {
            var _oldShow = $.fn.show;

            $.fn.show = function(speed, oldCallback) {
                return $(this).each(function() {
                    var obj = $(this),
                        newCallback = function() {
                            if ($.isFunction(oldCallback)) {
                                oldCallback.apply(obj);
                            }
                            obj.trigger('afterShow');
                        };

                    // you can trigger a before show if you want
                    obj.trigger('beforeShow');

                    // now use the old function to show the element passing the new callback
                    _oldShow.apply(obj, [speed, newCallback]);
                });
            };

            var _oldHide = $.fn.hide;

            $.fn.hide = function(speed, oldCallback) {
                return $(this).each(function() {
                    var obj = $(this),
                        newCallback = function() {
                            if ($.isFunction(oldCallback)) {
                                oldCallback.apply(obj);
                            }
                            obj.trigger('afterHide');
                        };

                    // you can trigger a before hide if you want
                    obj.trigger('beforeHide');

                    // now use the old function to show the element passing the new callback
                    _oldHide.apply(obj, [speed, newCallback]);
                });
            };
        });
        jQuery(document).foundation();
        jQuery('div.tooltip.joyride').on('beforeShow', function() {
            let idElementFor = <string>jQuery(this).data('joyrideFor');
            if (idElementFor.endsWith('1') || idElementFor.endsWith('2'))
                idElementFor = idElementFor.substr(0, idElementFor.length - 1);

            setTimeout(function() {
                if (jQuery('div.tooltip.joyride:visible').length > 0) {
                    jQuery('.foundation-joyride-overlay').addClass('visible');
                    jQuery(idElementFor).addClass(
                        'foundation-joyride-current-target'
                    );
                }
            }, 200);
        });
        jQuery('div.tooltip.joyride').on('beforeHide', function() {
            let idElementFor = jQuery(this).data('joyrideFor');
            if (idElementFor.endsWith('1') || idElementFor.endsWith('2'))
                idElementFor = idElementFor.substr(0, idElementFor.length - 1);

            jQuery(idElementFor).removeClass(
                'foundation-joyride-current-target'
            );
            setTimeout(function() {
                if (jQuery('div.tooltip.joyride:visible').length == 0) {
                    jQuery('.foundation-joyride-overlay').removeClass(
                        'visible'
                    );
                }
            }, 200);
        });
        jQuery('div.tooltip.joyride').on(
            'click.zf.joyride',
            '[data-joyride-close]',
            function(e) {
                let joyrideStatus = self.Session.user.joyride_done;
                if (typeof joyrideStatus === 'undefined') joyrideStatus = {};
                else joyrideStatus = { ...self.Session.user.joyride_done };

                if (self.program._id) joyrideStatus.program_pl_step_3 = true;
                else joyrideStatus.program_step_3 = true;

                self.apiService
                    .patch(self.Session.user, { joyride_done: joyrideStatus })
                    .subscribe(_ => {
                        self.Session.user.joyride_done = joyrideStatus;
                        self.Session.setUser(self.Session.user);
                    });
            }
        );
        let userJoyride = self.Session.user.joyride_done;
        if (
            userJoyride == undefined ||
            Object.keys(userJoyride).length == 0 ||
            userJoyride.program_pl_step_3 === undefined ||
            userJoyride.program_pl_step_3 === false
        ) {
            jQuery('#add-group-joyride').foundation('start');
        }
    }

    close(): void {
        if (this.program._id) {
            this.$location.path('dashboard').search({
                p: this.program._id
            });
        } else {
            this.$location.path('dashboard');
        }
    }

    goBack(): void {
        sessionStorage.setItem(
            'group-add-flow-data',
            JSON.stringify(this.programFlowData)
        );
        this.$location.path('add-program');
    }

    canSave(): boolean {
        let filledGroups = 0;
        for (let group of this.groups)
            filledGroups += group.completed() ? 1 : 0;
        return filledGroups > 0;
    }

    addGroup(): void {
        let newGroup = new Group();
        this.groups.push(newGroup);
        this.selectedGroup = newGroup;
    }

    startDateChanged(endDatePicker): void {
        if (
            this.selectedGroup.end == undefined ||
            this.selectedGroup.end <= this.selectedGroup.start
        ) {
            endDatePicker.open();
        }
    }

    checkDuplicatedGroups() {
        let allNames = {};

        for (let pGroup of this.previousGroups) {
            let name = pGroup.name;

            let siteName;
            for (let s of this.sites) {
                if (s._id == pGroup.site) {
                    siteName = s.name;
                    break;
                }
            }
            if (allNames[name + siteName]) {
                return true;
            } else {
                allNames[name + siteName] = true;
            }
        }
        for (let group of this.groups) {
            let name = group.name;
            if (name == '') continue;
            let siteName = group.site;
            if (allNames[name + siteName]) {
                return true;
            } else {
                allNames[name + siteName] = true;
            }
        }
        return false;
    }

    save(): void {
        if (this.checkDuplicatedGroups()) {
            alert('Error: You entered a duplicated group name.');
            return;
        }
        let groupsCompleted = this.groups.filter(group => group.completed());
        this.loading = true;
        if (this.program._id) {
            //the program and sites already exist
            let groupsSend = [];
            for (let group of groupsCompleted) {
                let groupSend = <any>{ ...group };
                for (let s of this.sites) {
                    if (s.name == group.site) groupSend.site = s._id;
                }
                groupsSend.push(groupSend);
            }
            this._groupService.createGroups(groupsSend).subscribe(() => {
                this.loading = false;
                let site_id = groupsSend.filter(group => {
                    return group.name == this.selectedGroup.name;
                })[0].site;
                this.$location.path('dashboard').search({
                    p: this.program._id,
                    s: site_id
                });
            });
        } else {
            let data = { ...this.programFlowData };
            data.groups = groupsCompleted;
            data.leaders = [];
            this._programService
                .createProgramFlow(data)
                .subscribe(responseData => {
                    this.loading = false;
                    this.$location.path('dashboard').search({
                        p: responseData.program_id
                    });
                });
        }
    }
}

团体服务:

import { Injectable } from '@angular/core';
import { Observable, of } from 'rxjs';
import { catchError, map, tap } from 'rxjs/operators';

import { Group } from '../models/group';
import { ApiService } from './api.service';
import { GroupModule } from '../modules/group.module';

@Injectable({
    providedIn: GroupModule
})
export class GroupService {
    private groupUrl = 'group'; // URL to web api
    constructor(private api: ApiService) {}

}

节目服务:

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';

import { ApiService } from './api.service';
import { GroupModule } from '../modules/group.module';
import { ProgramModule } from '../modules/program.module';

@Injectable({
    providedIn: GroupModule
})
export class ProgramService {
    private programUrl = 'program'; // URL to web api
    /* constructor(private api: ApiService) {} */

  console.log(word);
    }
}

API 服务:

import { Injectable, Inject } from '@angular/core';
import { Observable, of } from 'rxjs';
import { catchError, map, tap } from 'rxjs/operators';
import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http';
import { UpgradeModule } from '@angular/upgrade/static';
import { UtilFactory } from '../services/js/util.factory';
import { GroupModule } from '../modules/group.module';
import { ProgramModule } from '../modules/program.module';

@Injectable({
    providedIn: GroupModule
})
export class ApiService {
    private baseUrl = window['API_URL']; // URL to web api
    private httpOptions = {};

    constructor(
        private http: HttpClient,
        private upgrade: UpgradeModule,
        @Inject('Util') Util: any,
        @Inject('Session') Session: any
    ) {
        let headersMap = {
            'Content-Type': 'application/json',
            Authorization: Util.getToken()
        };
        if (Session.entered_as() && Session.getUser())
            headersMap['EnteredAs'] = Session.getUser().email;

        this.httpOptions = {
            headers: new HttpHeaders(headersMap)
        };
    }
}

错误是什么？

Answer 1

问题出在 ApiService 中，您尝试将模块作为依赖项注入(inject)，

constructor(
        private http: HttpClient,
        private upgrade: UpgradeModule //remove this
}

这个构造函数(private api: ApiService) {}也可能会导致如上所述的冲突，因此请将其注释掉。

确保是否需要它，因为您没有使用它，如果不需要，请将其从所有组件/服务中删除。

此外，您不应依赖其他服务。在这种情况下你应该使用@injectable。