Angular 2 最终版本：找不到名称“PatternDetails”

Question

我收到一个错误，即找不到“PatternList”（这是我创建的接口）。如果我尝试导入它，我会收到一个错误，即 PatternDetails 不是模块。我不确定是什么导致了这个错误。我在 angular2 项目中尝试配置 Webpack 时遇到了这个错误。

这是我使用 PatternDetails 接口的组件之一：

@Component({
  selector: 'pattern-detail',
  template: `
    <div class="pattern-detail" [ngClass]='{active: metadata.status.backendValidationStatus == "FAIL",
      unactive: metadata.status.backendValidationStatus == "OK",
      warning: metadata.status.backendValidationStatus == "WARN",
      selected: metadata.selected
    }' (click)="patternClicked(metadata)">
      <div class="name-details">
        <h3>{{metadata.displayName}}</h3>
        <p>{{metadata.details}}</p>
      </div>
      <div class="time-details">
        <p class='last_update'>{{metadata.lastupdate}}</p>
      </div>
    </div>
  `,
  styleUrls: ['/css/pattern_detail.css']
})
export class PatternDetailComponent {

  @Input() metadata:PatternDetails;
  @Output() selectPattern = new EventEmitter<PatternDetails>();

  patternClicked(pattern: PatternDetails) {
    this.selectPattern.emit(pattern);
  }

}

这是 PatternDetails 接口：

interface PatternDetails {
  patternClass: string;
  version: string;
  id: string;
  displayName: string;
  lastupdate: string;
  details: string;
  status: Status;
  selected: boolean;
}

我不确定我还应该包括什么，但经过调查，我发现 tsconfig.json 可能存在问题，所以我也将其包括在内：

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": true,
    "suppressImplicitAnyIndexErrors": true,
    "typeRoots": [
      "../node_modules/@types"
    ]
  },
  "types" : [
    "core-js"
  ],
  "exclude": [
    "node_modules"
  ]
}

app.module.ts

@NgModule({
  imports: [ BrowserModule, FormsModule, HttpModule, ReactiveFormsModule ],
  declarations: [ AppComponent, PatternListComponent, PatternDetailComponent, WidgetListComponent,
    FormComponent, DefaultWidget, LabelComponent, CheckboxWidget ],
  bootstrap: [ AppComponent ],
  providers: [ WidgetService ]
})
export class AppModule { }

Answer 1

你需要导出你的界面：

export interface PatternDetails {

...

}