在 ng build --prod 期间无法解析验证指令中的所有参数

Posted 2023-02-22

【中文标题】在 ng build --prod 期间无法解析验证指令中的所有参数

【英文标题】：Can't resolve all parameters in validation directive during ng build --prod

【发布时间】：2019-11-06 20:49:03

【问题描述】：

我已经解决了以下问题，但没有找到任何解决方案。

Angular 4 directive error: Can't resolve all parameters for directive Can't resolve all parameters for custom directive

我已经制作了一个自定义验证指令来验证唯一的永久链接。这段代码工作正常，但是当我尝试为生产创建构建时，它给了我以下错误：-

错误：无法解析所有参数 UniquePermalinkValidatorDirective 在 E:/Manish/Projects/ampleAdmin/src/app/shared/permalink-validation.directive.ts: ([object Object], ?)。

永久链接验证.directive.ts

import  Directive  from '@angular/core';
import  AsyncValidator, AbstractControl, ValidationErrors, NG_ASYNC_VALIDATORS, AsyncValidatorFn  from '@angular/forms';
import  Observable, of  from 'rxjs';
import  map  from 'rxjs/operators';
import * as qs from 'qs';
import  PageService  from '../services/page.service';
import  IPage  from '../client-schema';

export function UniquePermalinkValidator(pageService: PageService, page: IPage): AsyncValidatorFn 
  return (ctrl: AbstractControl): Promise<ValidationErrors | null> | Observable<ValidationErrors | null> => 
    if (!(ctrl && ctrl.value))  return null; 

    const cond: any = 
      where: 
        permalink: ctrl.value
      
    ;

    if (page && page.id) 
      cond.where.id =  nin: [page.id];
    
    const query = qs.stringify(cond,  addQueryPrefix: true );

    return pageService.getPageCount(query).pipe(
      map(res => 
        return res && res.count ?  uniquePermalink: true  : null;
      )
    );
  ;


@Directive(
  selector: '[appUniquePermalink]',
  providers: [ provide: NG_ASYNC_VALIDATORS, useExisting: UniquePermalinkValidatorDirective, multi: true ]
)
export class UniquePermalinkValidatorDirective implements AsyncValidator 

  constructor(private pageService: PageService, private page: IPage)  

  validate(ctrl: AbstractControl): Promise<ValidationErrors | null> | Observable<ValidationErrors | null> 
    return UniquePermalinkValidator(this.pageService, this.page)(ctrl);
  

page.component.ts

import  Component, OnInit, TemplateRef  from '@angular/core';
import * as _ from 'lodash';
import  NotifierService  from 'angular-notifier';
import  BsModalService, BsModalRef  from 'ngx-bootstrap/modal';
import  FormBuilder, FormGroup, Validators  from '@angular/forms';
import  IPage  from 'src/app/client-schema';
import  Utils  from 'src/app/shared/utils';
import  PageService  from 'src/app/services/page.service';
import  UniquePermalinkValidator  from 'src/app/shared/permalink-validation.directive';

@Component(
  selector: 'app-page',
  templateUrl: './page.component.html',
  styleUrls: ['./page.component.css']
)
export class PageComponent implements OnInit 

  private notifier: NotifierService;

  pageForm: FormGroup;
  pageDetail: IPage;

  isAddFold = false;
  isEditFold = false;
  editFoldIndex = -1;

  constructor(
    private pageService: PageService,
    private notifierService: NotifierService,
    private modalService: BsModalService,
    private formBuilder: FormBuilder,
  ) 
    this.notifier = notifierService;
  

  initPageForm() 
    this.pageForm = this.formBuilder.group(
      name: ['', [Validators.required, Validators.minLength(2), Validators.maxLength(250)]],
      permalink: ['', [Validators.required], UniquePermalinkValidator(this.pageService, this.pageDetail)],
      folds: [
        []
      ],
      data: null,
      status: true
    );
  

我对添加/编辑页面使用单一表单，因此我必须要求记录详细信息以允许在编辑页面时使用永久链接。

有没有办法将当前页面详细信息传递给指令？

【问题讨论】：

我将根据命名约定进行猜测，顺便说一下，这不是惯用的，IPage 只是一个接口。根据定义，这样的类型注释不能用于推断注入的依赖关系。

是的，它是页面对象的接口。我必须在编辑表单上要求当前页面详细信息才能验证永久链接。

【参考方案1】：

给定

export function UniquePermalinkValidator(pageService: PageService, page: IPage): AsyncValidatorFn 
  // ...

给定

@Directive(
  selector: '[appUniquePermalink]',
  providers: [ provide: NG_ASYNC_VALIDATORS, useExisting: UniquePermalinkValidatorDirective, multi: true ]
)
export class UniquePermalinkValidatorDirective implements AsyncValidator     
  constructor(private pageService: PageService, private page: IPage) 
  // ...

鉴于IPage 是由

单独定义的

export interface IPage 
  id: number;
  // ...

那么UniquePermalinkValidatorDirective 按定义将不起作用，以所述方式失败。

interface 仅在 type 空间中定义某些内容，而不在 value 空间中定义，因此没有任何运行时表现形式。这意味着它不能用于值位置。

本质上，Angular 的依赖注入系统会读取构造函数参数的type，当value空间中有对应命名的声明时，会使用对应命名的值作为注入令牌。

例如下面的

import Injectable from '@angular/core';

@Injectable() export class Service 
    constructor(http: Http) 

也可以写

import Inject from '@angular/core';

export class Service 
    constructor(@Inject(Http) http: ThisTypeIsArbitraryWithRespectToInjection) 

意思是一样的

注意Http 如何作为参数传递给Inject。但是Inject(IPage)（其中IPage 是interface）格式不正确。

@Inject(ProviderToken) 的主要目的是允许在您的情况下注入与装饰参数类型正交的提供程序。

因此，你需要类似的东西

constructor(@Inject(pageToken) page) 

这意味着需要定义一个令牌并使用它来注册一个可以注入的提供者。

一个人可以而且应该仍然写作

constructor(@Inject(pageToken) page: IPage) 

为了给参数一个类型但类型与为参数注入的值无关。

例如

import InjectionToken, NgModule from '@angular/core';

export const pageToken = new InjectionToken<IPage>('Page');

@NgModule(
  providers: [
    
      provide: pageToken,
      useFactory: functionReturningAPage
    
  ]
 ) export class // ...