我收到一个错误:
这是一些代码。
app.module.shared.ts:
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { AppComponent } from './components/app/app.component'
import { ServiceModuleListComponent } from './components/service-module-list/service-module-list.component';
import { HeaderComponent } from './components/shared/header/header.component';
import { ServiceModuleService } from './components/shared/service-module.service';
import { ServiceModuleComponent } from './components/service-module/service-module.component';
export const sharedConfig: NgModule = {
bootstrap: [AppComponent],
declarations: [
AppComponent,
ServiceModuleListComponent,
HeaderComponent,
ServiceModuleComponent
],
imports: [
RouterModule.forRoot([
{ path: '', redirectTo: 'servicemodulelist', pathMatch: 'full' },
{ path: 'servicemodulelist', component: ServiceModuleListComponent },
{ path: '**', redirectTo: 'servicemodulelist' }
])
],
providers: [ServiceModuleService]
};
app.module.client.ts:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { sharedConfig } from './app.module.shared';
@NgModule({
bootstrap: sharedConfig.bootstrap,
declarations: sharedConfig.declarations,
imports: [
BrowserModule,
FormsModule,
HttpModule,
...sharedConfig.imports
],
providers: [
{ provide: 'ORIGIN_URL', useValue: location.origin },
sharedConfig.providers
]
})
export class AppModule {
}
app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
}
service-module.component.ts:
import { Component, Input } from '@angular/core';
import { ServiceModule } from '../shared/service-module.type';
@Component({
selector: 'service-module',
templateUrl: './service-module.component.html'
})
export class ServiceModuleComponent {
@Input() serviceModule: ServiceModule
constructor() {
}
}
service-module-list.component.ts:
import { Component, OnInit } from '@angular/core';
import { ServiceModule } from '../shared/service-module.type';
import { ServiceModuleService } from '../shared/service-module.service';
import { ServiceModuleComponent }from '../service-module/service-module.component';
@Component({
selector: 'service-module-list',
templateUrl: './service-module-list.component.html'
})
export class ServiceModuleListComponent implements OnInit {
serviceModules: ServiceModule[];
constructor(private serviceModuleService: ServiceModuleService) {
}
ngOnInit() {
this.serviceModuleService.getServiceModuleItems()
.then(serviceModuleItems => {
this.serviceModules = serviceModuleItems;
});
}
}
service-module.service.ts:
import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/Rx';
import { ServiceModule } from './service-module.type';
@Injectable()
export class ServiceModuleService {
constructor(private http: Http) { }
getServiceModuleItems() {
return this.http.get('api/ServiceModuleItems')
.map(response => response.json() as ServiceModule[])
.toPromise();
}
}
service-module.type.ts:
export class ServiceModule {
idx: number;
applicationName: string;
isActive: boolean;
description: string;
}
基本上,在这一点上,应用程序在启动时必须显示我在SQL表上拥有的条目列表,并且该服务调用API来获取该列表,但是现在由于错误消息而停留在此问题上。
最佳答案
我进一步研究了这种语法:
imports: [
BrowserModule,
FormsModule,
HttpModule,
...sharedConfig.imports
],
这里的“...”是JavaScript传播运算符。它确保导入的内容添加在此处,而不是数组本身。我的一位同事这样解释:
imports: [
a,
b,
c,
sharedConfig.imports
]
最终(将数组放入)
imports: [a, b, c, [what_shared_config_has]]
而不是您想要的(数组中的值)
imports: [a, b, c, what_shared_config_has]
因此,这还需要具有传播算子:
providers: [
{ provide: 'ORIGIN_URL', useValue: location.origin },
...sharedConfig.providers
]