divエラーのプロパティではないのはなぜですか？

Question

Cory Rylanの手法を使用して、フォームに検証エラーメッセージを表示しています。これはRC4でうまくいきましたが、私はRC5でこの作業をするために何をすべきか分かりません。

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に起こる

は、ここに私のダウン切り詰めSharedModuleです。私がこれを注入しようとしているhtmlには数多くの* ngIfがあります。私はあらゆる組み合わせを無駄にしようとしました。どんな助力も心から感謝しています。

Answer 1

ValidationMessageModuleが（インポート）SharedModuleに依存するようにしたい場合は、SharedModuleを（インポート）ValidationMessageModuleに依存させることはできません。彼のコメントで述べた@StefanSvrkotaのような循環参照で終わるでしょう。

あなたの現在のSharedModuleがValidationMessageModuleをエクスポートしているので、このメッセージモジュールをアプリケーションのモジュール間で共有したいと考えています。あなたの問題を解決する最も簡単な方法は、SharedModuleにValidationComponentを置き、ValidationMessageModuleを完全に取り除くことです。 SharedModuleに依存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を変更します。代わりに、共有するモジュールのコンポーネント、ディレクティブ、パイプを共有したいからです。

Answer 2

あなたはCommonModuleは、このようなngIfやngForなどの一般的な指示を提供するため、@angular/commonからごValidationMessageModule輸入にCommonModuleを追加する必要があります。 BrowserModuleがインポートされ、BrowserModuleが再エクスポートされているので、ルートモジュールにngIfを使用できます。CommonModuleを再エクスポートします。