[英]importing a component in multiple module in Angular 4
我有一个SharedModule
import { NgModule } from '@angular/core';
import { ControlMessagesComponent } from './control-messages.component';
@NgModule({
imports: [
],
declarations: [
ControlMessagesComponent
],
exports: [
ControlMessagesComponent,
]
})
export class SharedModule {}
然后我导入了2个不同的模块:
import { SharedModule } from './../shared/shared.module';
@NgModule({
imports: [
SharedModule
],
declarations: [
],
providers: [
]
})
export class OnboardModule {}
import { SharedModule } from '../shared/shared.module';
@NgModule({
imports: [
SharedModule
],
declarations: [
],
providers: [
]
})
export class AModule {}
这是ControlMessagesComponent
import { Component, Input } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';
import { ValidationService } from './../validators/validator';
@Component({
selector: 'control-messages',
template: `<div *ngIf="errorMessage !== null">{{errorMessage}}</div>`
})
export class ControlMessagesComponent {
@Input() control: FormControl;
constructor() {}
get errorMessage() {
for (const propertyName in this.control.errors) {
if (this.control.errors.hasOwnProperty(propertyName) && this.control.touched) {
return ValidationService.getValidatorErrorMessage(propertyName, this.control.errors[propertyName]);
}
}
return null;
}
}
当我使用它时: <control-messages [control]="form.controls.assetName"></control-messages>
我收到以下错误:
无法绑定到'ngIf',因为它不是'div'的已知属性。 (“] * ngIf =”errorMessage!== null“> {{errorMessage}}”):ng:///SharedModule/ControlMessagesComponent.html@0:5属性绑定ngIf未被嵌入式模板上的任何指令使用。 确保属性名称拼写正确,并且所有指令都列在“@ NgModule.declarations”中。 (“[ERROR - >] {{errorMessage}}”):ng:///SharedModule/ControlMessagesComponent.html@0:0
我没有选择可以有人请让我知道我在这里做错了什么?
将CommonModule
添加到SharedModule
。 NgIf
和NgForOf
也指示这是在CommonModule
。 实际上在SharedModule
Component使用NgIf
,因此您必须在模块中导入它。
该模块包含所有基本的Angular指令,如
NgIf
,NgForOf
,
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ControlMessagesComponent } from './control-messages.component';
@NgModule({
imports: [
CommonModule
],
declarations: [
ControlMessagesComponent
],
exports: [
ControlMessagesComponent,
]
})
export class SharedModule {}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.