Question

我是Angular 2的新手，我正在学习如何包含插件。我收到了这个错误：

未捕获错误：无法解析SwitchClientComponent的所有参数：（[object Object]，[object Object]，[object Object]，[object Object]，[object Object]，[object Object] ，？，？）

实施crypto-js。

我确定它是因为我没有正确安装和引用它。

我有一个app.module.ts文件（为简洁而剪断）：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule, APP_INITIALIZER  } from '@angular/core';
import { FormsModule } from '@angular/forms';
...
import { MomentModule } from 'angular2-moment';
import { CryptoJS } from "crypto-js";

@NgModule({
    declarations: [
        AppComponent,
        ...
        SwitchClientComponent
    ],
    imports: [
        BrowserModule,
        ...
        StoreModule.provideStore({ appState: appStateReducer }),
    ],providers: [
    { provide: AppConfig, useFactory: serviceConfigFactory },
    SiteService,
    AppContext,
    { provide: APP_INITIALIZER, useFactory: AppContextLoader, deps: [AppContext], multi: true },
    EmployeeService,
    EncryptionService
],
    ...

})
export class AppModule { }

（我看到一个导入行，但在@NgModule中没有相应的引用......）

以下是我尝试使用它的地方：

import { Injectable } from '@angular/core';
import { CryptoJS } from "crypto-js";

@Injectable()
export class EncryptionService {

    secretKey: string = "123";

    constructor() {
    }

    public setLocalStorage(storagePrefix : string, jsonObj) {
        localStorage.setItem(storagePrefix, this.encrypt(jsonObj));
    }

    encrypt(jsonObj) {
        return CryptoJS.AES.encrypt(JSON.stringify(jsonObj), this.secretKey);
    }
}

以下是尝试使用该服务的实际switch-client-component：

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { SiteService } from '../../services/site.service';
import { CompanyRoutes } from '../../features/company/company.routes';
import { AppContext } from '../../services/app.context';
import { SiteConfig } from '../../models/site/site.config';
import { AuthService } from '../../services/auth/auth.service';
import { EncryptionService } from '../../services/encryption.service';

@Component({
  selector: 'app-switch-client',
  templateUrl: './switch-client.component.html',
  styleUrls: ['./switch-client.component.scss']

})
export class SwitchClientComponent implements OnInit {
    availableClients : any[] = [];
    filterString: string = '';
    frequentClients: any[] = [];
    maxFrequentClients: number = 6;
    storagePrefix = 'AbilitiConnect-FrequentClients';

    constructor(public auth: AuthService,
        private route: ActivatedRoute,
        private router: Router,
        private appContext: AppContext,
        private siteService: SiteService,
        private companyRoutes: CompanyRoutes,
        private encryptionService, EncryptionService
    ) {}


    ngOnInit() {
        this.availableClients = this.siteService.getAvailableClientCodes();
        //redirect the user to main page if there is onlu one client.
        if (this.availableClients == null || this.availableClients.length <= 1) {
            this.router.navigate(['/']);
        }
        this.purgeFrequentClients();
        this.frequentClients = this.getFrequentClients();
    }

    switchClient(client) {
        this.updateFrequentClient(client);
        this.appContext.switchClient(client.ClientCode)
            .subscribe((siteConfig: SiteConfig) => {
                this.companyRoutes.resetCompanyRoutes(siteConfig.clientCode, "/");
                this.router.navigate(['/']);
            });
    };

    updateFrequentClient(client) {
        var tempClientArr = [];
        tempClientArr = this.getFrequentClients();
        tempClientArr = tempClientArr.filter(item => item.Name !== client.Name);
        tempClientArr.unshift(client);
        tempClientArr = tempClientArr.slice(0, this.maxFrequentClients);
        this.encryptionService.setLocalStorage(this.storagePrefix, tempClientArr);
    };

    getFrequentClients() {
        return this.encryptionService.getLocalStorage(this.storagePrefix);
    };
    purgeFrequentClients() {
        this.encryptionService.setLocalStorage(this.storagePrefix, []);
    };
}

我不知道如何解释这个错误。

Answer 1

好像你有拼写错误

constructor(public auth: AuthService,
        private route: ActivatedRoute,
        private router: Router,
        private appContext: AppContext,
        private siteService: SiteService,
        private companyRoutes: CompanyRoutes,
        private encryptionService, EncryptionService 
                               ^^^^^
                          you should change it to :
   ) {}

正确的代码应该是

constructor(public auth: AuthService,
        private route: ActivatedRoute,
        private router: Router,
        private appContext: AppContext,
        private siteService: SiteService,
        private companyRoutes: CompanyRoutes,
        private encryptionService: EncryptionService
   ) {}

Answer 2

安装Cryto js usning npm

npm install crypto-js 

typings install dt~crypto-js --global --save

您可以通过以下方式参考crypto js

import * as CryptoJS from 'crypto-js';

Angular 2 - 移动嵌入式插件以服务

2 个答案: