首页 文章

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

提问于
浏览 次
1

我有 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“> {}”）：ng：///SharedModule/ControlMessagesComponent.html@0：5属性绑定ngIf未被嵌入式模板上的任何指令使用 . 确保属性名称拼写正确，并且所有指令都列在“@ NgModule.declarations”中 . （“[ERROR - >] {}”）：ng：///SharedModule/ControlMessagesComponent.html@0：0

我没有选择可以有人请让我知道我在这里做错了什么？

angular typescript angular-module

1 回答

  • 5

    将 CommonModule 添加到 SharedModule . NgIf 和 NgForOf 也是 CommonModule 中的指令 . 实际位于 SharedModule 的Component使用 NgIf ，因此您必须在模块中导入它 .

    Description

    包含所有基本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 {}
    回复于

相关问题