Angular 2 - 将嵌入式插件移至服务

Question

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

未捕获错误：无法解析 SwitchClientComponent 的所有参数：([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

使用 npm 安装 Crypto js

npm install crypto-js 

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

您可以通过以下方式引用crypto js

import * as CryptoJS from 'crypto-js';

Angular 2 - 将嵌入式插件移至服务

Angular 2 - moving embedded plugin to service

cryptojs

angular