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

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

您需要添加CommonModulefrom @angular/common到您的ValidationMessageModule导入,因为CommonModule它提供了常见的指令,如ngIf或ngFor.您可以ngIf在根模块中使用,因为您已BrowserModule导入和BrowserModule重新导出CommonModule.

Answer 2

如果你想ValidationMessageModule依赖 (import) SharedModule，你不能同时SharedModule依赖 (import) 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. 相反，让它们的组件、指令和管道成为共享模块的一部分，因为您想共享它们