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

我正在使用 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，所有这些都可以正常工作。我尝试了所有组合都无济于事。任何帮助真诚感谢。

最佳答案

如果您希望 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 。相反，将它们的组件、指令和管道作为共享模块的一部分，因为您想共享它们

关于angular - 为什么我得到 *ngIf 不是 div 错误的属性？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/39350675/