加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 服务器 > 安全 > 正文

Angular 2没有服务提供商

发布时间:2020-12-17 08:48:40 所属栏目:安全 来源:网络整理
导读:我正在尝试学习Angular 2和C#web api Core,并从这个视频开始. https://channel9.msdn.com/Events/Visual-Studio/Visual-Studio-2017-Launch/WEB-103 他没有包含下载代码.我使用VS2017和脚手架工具创建了一个略有不同的文件结构. 我收到错误“异常:调用节点
我正在尝试学习Angular 2和C#web api Core,并从这个视频开始.
https://channel9.msdn.com/Events/Visual-Studio/Visual-Studio-2017-Launch/WEB-103
他没有包含下载代码.我使用VS2017和脚手架工具创建了一个略有不同的文件结构.
我收到错误“异常:调用节点模块失败,错误:错误:未捕获(在承诺中):错误:没有ServiceModuleService的提供程序!
错误:没有ServiceModuleService的提供程序!“
这是一些代码,请询问您是否需要了解更多信息.

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

服务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() {

    }
}

服务模块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;
            });
    }
}

服务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();
    }
}

服务module.type.ts:

export class ServiceModule {
    idx: number;
    applicationName: string;
    isActive: boolean;
    description: string;
}

基本上在这一点上,在启动时,应用程序必须显示我在SQL表上的条目列表,并且服务调用api来获取它,但现在我遇到了这个问题并出现错误消息.

我更多地研究了这个语法:
imports: [
    BrowserModule,...sharedConfig.imports
],

这里的’…’是JavaScript扩展运算符.它确保在此处添加导入的内容,而不是数组本身.我的一位同事解释如下:

imports: [
  a,b,c,sharedConfig.imports
]

你最终(将数组放入)

imports: [a,[what_shared_config_has]]

而不是你想要的(数组中的值)

imports: [a,what_shared_config_has]

所以这需要有扩展运算符:

providers: [
    { provide: 'ORIGIN_URL',...sharedConfig.providers
]

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读