Question

我正在使用Cory Rylan的技术版本在我的表单上显示验证错误消息。这在RC4中运行良好，但是，我无法弄清楚如何使用RC5来完成这项工作。

这是我的减少SharedModule：

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

import { ValidationService } from '../services/validation.service';
import {ValidationMessageComponent} from '../validation/validation.message.component;

@NgModule({
  imports: [CommonModule, RouterModule, MenubarModule ],
  declarations: [ ValidationMessageComponent ],
  exports: [ CommonModule, ReactiveFormsModule, HttpModule, ValidationMessageComponent ]
})

export class SharedModule {
  //
  static forRoot(): ModuleWithProviders {
    return {
      ngModule: SharedModule,
      providers: [ ValidationService ]
    };
  }
}

ValidationMessageComponent：

import { Component, Input } from '@angular/core';
import { FormControl } from '@angular/forms';
import { ValidationService } from '../services/validation.service';

@Component({
  moduleId: module.id,
  selector: 'kg-validationMessage',
  template: `<div *ngIf="validationMessage !== null">{{validationMessage}}</div>`
}) 


export class ValidationMessageComponent {
  @Input() control: FormControl;
  constructor() { }

  get validationMessage() {
    for (let propertyName in this.control.errors) {
      if (this.control.errors.hasOwnProperty(propertyName) && this.control.touched) {
        return ValidationService.getValidatorErrorMessage(propertyName, this.control.errors[propertyName]);
      }
    }

    return null;
  }
}

错误发生在模板* ngIf中。我试图将其注入的HTML有许多* ngIf，所有这些都可以正常工作。我尝试过每一个组合都无济于事。任何帮助都真诚地感激。

Answer 1

您需要将CommonModule从@angular/common添加到ValidationMessageModule个导入，因为CommonModule提供了ngIf或ngFor等常用指令。您可以在根模块中使用ngIf，因为您已导入BrowserModule并BrowserModule重新导出CommonModule。

Answer 2

如果您希望ValidationMessageModule依赖（导入）SharedModule，则不能让SharedModule依赖（导入）ValidationMessageModule。你将在他的评论中提到@StefanSvrkota的循环引用。

由于您当前的SharedModule正在导出ValidationMessageModule，因此我推断您希望在应用程序的各个模块之间共享此消息模块。解决您问题的最简单方法是将ValidationComponent带入SharedModule并完全删除ValidationMessageModule。我会将 SharedModule 更改为：

@NgModule({
  imports: [CommonModule, RouterModule, MenubarModule],

  //all your components, pipes & directives meant to be shared
  declarations: [ValidationComponent],

  //modules to share, but also everything from declarations array
  exports: [ CommonModule, ReactiveFormsModule, HttpModule, ValidationComponent]
})

export class SharedModule {
  //
  static forRoot(): ModuleWithProviders {
    return {
      ngModule: SharedModule,
      providers: [ ValidationService]
    };
  }
}

基本上，不要导入SharedModule依赖SharedModule的其他模块。相反，将它们的组件，指令和管道作为共享模块的一部分，因为您要共享它们

为什么我得到* ngIf不是div错误的属性？

2 个答案: