Angular：共享模块未找到在 Input() 属性中使用的相关 class

Question

我最近将一个小应用程序重构为模块。我运行遇到多次声明组件的问题，所以我将这些重复项分解到一个共享模块中。

在大多数情况下，这是可行的，但我有一个组件无法加载。

我收到以下错误：

ERROR in Template parse errors: Can't bind to 'error' since it isn't a known property of 'error-display'. 1. If 'error-display' is an Angular component and it has 'error' input, then verify that it is part of this module.

组件如下所示：

import {Component, OnInit, Input} from '@angular/core';
import {Response} from "@angular/http";
import {Observable} from "rxjs";

@Component({
  selector: 'error-display',
  //templateUrl: 'errorDisplay.html'
  template:  `
      <div *ngIf="error.message"
           class="alert alert-{{error.icon}} alert-dismissable">
          <button *ngIf="error.dismissable" type="button" class="close"
                  data-dismiss="alert" aria-hidden="true">
              <i class="fa fa-remove"></i>
          </button>

          <div *ngIf="error.header" style="font-size: 1.5em; font-weight: bold">
              <i class="fa fa-{{error.imageIcon}}" style="color: {{error.iconColor}}"></i>
              {{error.header}}
          </div>
          <i *ngIf="!error.header"
             class="fa fa-{{error.imageIcon}}"
             style="color: {{error.iconColor}}"></i>

          <strong>{{error.message}}</strong>
      </div>
  `
})

export class ErrorDisplay {
  constructor() {
  }

  // *** THIS IS THE PROBLEM PROPERTY ***
  @Input() error: ErrorInfo = new ErrorInfo();
}


// @Injectable()
export class ErrorInfo {
  constructor() {
    this.reset();
  }

  message:string;
  icon:string;
  dismissable:boolean;
  header:string;
  imageIcon:string;
  iconColor:string;
  timeout: number;    
  response:Response = null;    
  ...
}

错误提示组件没有在模块级别注册，而是在我的共享模块中注册；

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import {ErrorDisplay, ErrorInfo} from "./error-display/errorDisplay";
import {AppConfiguration} from "./appConfiguration";

@NgModule({
  providers: [
    AppConfiguration,
    ErrorInfo
  ],
  imports: [
    CommonModule
  ],
  declarations: [
    ErrorDisplay
  ]
})
export class SharedModule { }

然后在应用模块中导入共享模块：

imports: [
    ...
    SharedModule,
    UserAuthenticationModule,
    UserAdministrationModule,
    ...
],

使用该组件的各个页面也明确引用该组件和嵌入的 class:

import { Component, OnInit } from '@angular/core';
import {ErrorInfo} from "../../shared/error-display/errorDisplay";


@Component({
    selector: 'signin',
    templateUrl: './signin.html'
})
export class SignInComponent implements OnInit {

    error: ErrorInfo = new ErrorInfo();

    ...
}

在我看来，组件在 declarations: [ErrorDisplay] 共享模块中的正确位置被引用。

当一切都是主应用程序模块的一部分时，此代码工作正常。但是作为共享模块的一部分，我无法让它工作。

我试过将 ErrorInfo 添加为服务并添加为提供程序，但这并不能解决问题。如果我将 ErrorDisplay 作为声明的组件添加到另一个模块，我得到：

ype ErrorDisplay is part of the declarations of 2 modules: SharedModule and UserAuthenticationModule! Please consider moving ErrorDisplay to a higher module that imports SharedModule and UserAuthenticationModule.

这正是我一开始所做的。

看起来我需要以某种方式声明 ErrorInfo class（它不是真正的服务，因为它只是由使用它的组件在内部创建，但我不知道

我错过了什么？

Answer 1

问题似乎是您还没有导出 error-display，所以应用不知道它是什么，更不用说它的 error 输入了。

所以像这样添加：

exports: [ErrorDisplay]

在你的 SharedModule 中它应该可以工作。

Angular：共享模块未找到在 Input() 属性中使用的相关 class

Angular: Shared Module not finding dependent class used in Input() Property

angular-module

angular

Angular：共享模块未找到在 Input() 属性 中使用的相关 class

Angular: Shared Module not finding dependent class used in Input() Property

angular-module

angular

Angular：共享模块未找到在 Input() 属性中使用的相关 class