Question

这是我的app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HttpModule } from '@angular/http';
import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { CookieService } from 'ngx-cookie-service';
import { HttpClientModule } from '@angular/common/http';
import { NgxSpinnerModule } from 'ngx-spinner';
import { NgFlashMessagesModule } from 'ng-flash-messages';
import { NgxfUploaderModule } from 'ngxf-uploader';
import { NgxUploaderModule } from 'ngx-uploader';
import { NumberDirective } from './number.directive';
import { FileSelectDirective } from 'ng2-file-upload';
import { BsDatepickerModule } from 'ngx-bootstrap/datepicker';
@NgModule({
  declarations: [
    AppComponent,
    FirstPageComponent,
    SavePasswordComponent,
    LoginPageComponent,
    VerifyDetailsComponent,
    HomePageComponent,
    ViewOfferLetterComponent,
    ContactOptionComponent,
    SocialLinksComponent,
    ContactUsComponent,
    CompanyDetailsComponent,
    CompanyVisionComponent,
    SaveInformationComponent,
    AboutUsComponent,
    ComponyHistoryComponent,
    TestimonialComponent,
    AllocateOfficeComponent,
    NumberDirective,
    FacilitiesComponent,
    FirstDayRuleComponent,
    CompanyMediaComponent,
    HeaderPagesComponent,
    TestImageGallaryComponent,
  ],
  imports: [
    BrowserModule,
    MatProgressBarModule,
    HttpModule,
    FormsModule,
    HttpClientModule,
    NgxSpinnerModule,
    NgxfUploaderModule,
    NgxUploaderModule,
    NgFlashMessagesModule.forRoot(),
    NgbModule.forRoot(),
    BsDatepickerModule.forRoot(),
    RouterModule.forRoot(
    appRoutes,  // { enableTracing: true } // <-- debugging purposes only
    ),
    ModalGalleryModule.forRoot() // <----------------- angular-modal-gallery module import
  ],
  providers: [
    GlobalService,
    AuthguardGuard,
    SuperAdmiApiService,
    EmployeeApiService,
    CookieService
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

这是我可能在其中产生错误的组件

       import { Component, OnInit, VERSION, NgModule, Injectable } from '@angular/core';
// import {EventModel} from '../../models/EventModel';
import { BrowserModule } from '@angular/platform-browser';
import { EmployeeApiService } from '../../../config-pages/employee-api.service';
import { GlobalService } from '../../../config-pages/global.service';
import { CookieService } from 'ngx-cookie-service';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';
import { Resolve, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import { GridLayout, Image, PlainGalleryConfig, PlainGalleryStrategy } from 'angular-modal-gallery';
export interface Image {
  id: number;
  text: string;
}
import * as $ from 'jquery';
import { async } from '../../../../../node_modules/rxjs/internal/scheduler/async';
interface JQuery {
  center(): JQuery;
}
@Component({
  selector: 'app-test-image-gallary',
  templateUrl: './test-image-gallary.component.html',
  styleUrls: ['./test-image-gallary.component.css']
})
@Injectable()
export class TestImageGallaryComponent implements OnInit, Resolve<any> {

  name: string;
  compid: any;
  candidateid: any;
  Response: any;
  gallaryData: any;
  responseMessage: any;
  imageUrl: any;
  Image = [];
  isDataAvailable: any;
  data: any;
  i: any;
  asyncResult: any;
  htmlToAdd: any;
  plainGalleryGrid: PlainGalleryConfig = {
    strategy: PlainGalleryStrategy.GRID,
    layout: new GridLayout({ width: '86px', height: '86px' }, { length: 3, wrap: true })
  };
  constructor(private EmployeeApi: EmployeeApiService, private _global: GlobalService, private cookieService: CookieService) {
    this.candidateid = this.cookieService.get('candidateid');
    this.compid = this.cookieService.get('companyid');
    this.imageUrl = this._global.CompanyImagePath;
}
  resolve(route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot,
   ): Observable<any[]> {
   this.data = this.EmployeeApi.getimagegallarydata(this.compid, this.candidateid ).pipe(map(
      resultArray => {
    this.Response = resultArray;
    if (this.Response.status === 200) {
        this.gallaryData = this.Response.gallarydata;
        for ( this.i = 0; this.i < this.gallaryData.length; this.i++) {
          // alert(this.i);
          this.Image[this.i] =
            new Image(
              this.i,
              { // modal
                img: this.imageUrl + this.gallaryData[this.i].filename,
                extUrl: 'http://www.google.com'
              }
            );
        }
        console.log(this.Image);
      } else {
      this.responseMessage = 'Gallary not available';
      alert(this.responseMessage);
    }
    }
    )
  );
  return void(0);
}
ngOnInit() {
  this.pageload();
}
 // set page ui according to screen size
 pageload() {
  $.fn.center = function () {
    this.css('position', 'absolute');
    this.css('top', Math.max(0, (($(window).height() - $(this).outerHeight()) / 2) +
     $(window).scrollTop()) + 'px');
     this.css('left', Math.max(0, (($(window).width() - $(this).outerWidth()) / 2) + $(window).scrollLeft()) + 'px');
       return this;
   };
   $('#abc0').center();
}
}

我在角度6中有一个静态注射器问题，实际上我导入了 app.module.ts中的httpclientmodule，广告位于导入数组中

Answer 1

您似乎正在尝试将组件用作解析器。

解析器旨在提供服务，因为它们应该在模块的providers数组中注册-我怀疑这就是为什么您收到进样器错误的原因。

理想情况下，您应该将resolve拆分为一个单独的类，用@Injectable装饰它，并在模块的providers数组中对其进行引用。

您的解析器如下所示：

@Injectable()
export class TestImageGallaryComponentResolver implements Resolve<any> {
  resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<any> {
    // Get your data here and return it. This class can receive dependencies in the constructor.
  }
}

您的路由器配置如下所示：

{
  path: 'gallery'
  component: TestImageGallaryComponent,
  resolve: {
    data: TestImageGallaryComponentResolver
  }
}

您的组件可以按以下方式访问数据：

@Component({
  selector: 'app-test-image-gallary',
  templateUrl: './test-image-gallary.component.html',
  styleUrls: ['./test-image-gallary.component.css']
})
export class TestImageGallaryComponent implements OnInit {
  constructor(activatedRoute: ActivatedRoute) {
    activatedRoute.data.subscribe(resolvedData => {
      // Do stuff with resolvedData.data
    });
  }
}

使用组件作为其自己的解析器对我来说从来没有发生过，但是我很确定它不会起作用。如果将组件添加到providers数组中，则它可能会很好地运行，但是数据将不会到达您期望的位置。

注入器将以单例形式提供用于解析的“组件”，并在视图请求时提供该组件的完全不同的实例。组件在收到请求时会立即实例化，而providers数组中的所有内容都是单例。

angular guide提供了一个有关如何使用解析器的深入示例。

Answer 2

您刚刚声明了 TestImageGallaryComponent ，但未导入app.module.ts

赞：

import { TestImageGallaryComponent } from 'Some-path';

错误：角度4或角度6中的StaticInjectorError（AppModule）

2 个答案: