在Angular 4中的多个模块中导入组件

H先生

我有一个 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属性绑定ng如果嵌入式模板上的任何指令均未使用。确保属性名称拼写正确,并且所有指令均在“ @ NgModule.declarations”中列出。(“ [ERROR->] {{errorMessage}}”):ng:///SharedModule/ControlMessagesComponent.html@0:0

我没有选择权,有人可以让我知道我在做什么错吗?

苏伦·斯拉皮扬

添加CommonModule到您的中SharedModuleNgIf并且NgForOf也是。中的指令CommonModule实际上位于中的ComponentSharedModule使用NgIf,因此必须将其导入模块中。

描述

包括所有的基本角指令像模块NgIfNgForOf

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 {}

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

从Angular 4中的其他包中导入模块

在Angular2中导入模块

通过模块导入多个Angular组件

在angular4中导入jQuery

在Angular中导入库/模块

在Angular中导入很多模块

在Nativescript Angular中导入组件

如何在 Angular 4 中导入自定义模块?

在angular 4项目中导入fabric js组件

我在功能模块中导入FormGroup,它在Angular4多模块结构中引发错误

在Angular中导入Web组件(导出为es6模块)

在Angular中导入组件和模块的最有效方式是什么?

在Angular中导入外部模块功能

在Angular4中导入自定义字体

在Angular的组件中导入全局LESS文件

Angular 中导入/导出/声明组件的问题

如何在Angular 4.x(Angular Cli)App中导入RequireJS(AMD)模块?

Angular 2+,有什么方法可以声明一个模块中的所有组件,然后在 app.module.ts 中导入?

尽管导出,Angular仍无法识别导入模块中的组件

Angular 6 从模块中的不同路径导入相同的组件

Angular2无法识别导入模块中的组件

如何在Angular 2中创建导入QuillJS模块的组件?

在Angular中导入模块后,如何从模块中自动运行服务?

如何在Angular 9中导入所有Angular Material模块

Angular 10:如何在一个模块中导出多个组件

在多个模块中声明的Angular2组件

Angular,如何在延迟加载的模块中包含多个组件?

如何在angular 8中的Web Worker中导入打字稿模块?

在Angular6中导入jquery:找不到模块:错误:无法解析'jquery'