angular - 为什么我会收到 *ngIf not a property of 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 ]
    };
  }
}

验证消息组件:

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 中。我试图将其注入(inject)的 html 有许多 *ngIf，所有这些都工作正常。我试过所有组合都无济于事。真诚感谢任何帮助。

Answer 1

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