Question

您好我在尝试使用名为“CommmonService”的服务

时遇到问题

问题是我需要使用此服务从其他组件调用函数，但我收到此错误：“错误：（SystemJS）模块'AppModule'声明的意外值'CommonService'”

common.service.ts

import { Injectable, Inject } from '@angular/core';
import { Subject } from 'rxjs/Subject';

@Injectable()
export class CommonService {
    private notify = new Subject<any>();
    /**
     * Observable string streams
     */
    notifyObservable$ = this.notify.asObservable();

    constructor() { }

    public notifyOther(data: any) {
        if (data) {
            this.notify.next(data);
        }
    }
}

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { RouterModule } from '@angular/router';

import { AppHeader } from './app.header';
import { CommonService } from './common.service';
import { AppContent } from './app.content';
import { AppModal } from './app.modal';
import { AppFooter } from './app.footer';
import { DialogComponent } from './dialog.component';


@NgModule({
    imports: [
        BrowserModule,
        FormsModule,
    ],
    declarations: [
        AppHeader,
        CommonService,
        AppContent,
        AppFooter,
        AppModal,
        DialogComponent
    ],
    bootstrap: [AppHeader, AppContent, AppFooter, AppModal]
})

export class AppModule { }

app.content.ts

import { Component, OnInit, OnDestroy } from '@angular/core';
import { Subscription } from 'rxjs/Subscription';

import { Product } from './product';
import { CommonService } from './common.service';


const PRODUCTS: Product[] = [
    { id: 0, color: 'Negro', quantity: 15, price: 500, imgUrl: '', cant: 1 },
    { id: 1, color: 'Castaño Oscuro', quantity: 15, price: 500, imgUrl: '', cant: 1 },
    { id: 2, color: 'Castaño Medio', quantity: 15, price: 500, imgUrl: '', cant: 1 },
    { id: 3, color: 'Gris', quantity: 15, price: 500, imgUrl: '', cant: 1 },
    { id: 4, color: 'Rubio', quantity: 15, price: 500, imgUrl: '', cant: 1 }
];

@Component({
    selector: 'content-app',
    templateUrl: 'app/content.html'
})

export class AppContent implements OnInit, OnDestroy {

    constructor(private commonService: CommonService) {
    }

    ngOnInit() {
    }

    onSubmit() {
        // this method needs to be called when user click on submit button from header
        alert("x");
        this.commonService.notifyOther({ option: 'onSubmit', value: 'From app.content' });
    }

    ngOnDestroy() {
    }

    products = PRODUCTS;

    addCant(product) {
        product.cant++;
        product.price = this.updatePrice(product);
        product.quantity = this.updateQuantity(product);
    }

    removeCant(product) {

        if (product.cant > 1) {
            product.cant--;
            product.price = this.updatePrice(product);
        }
    }

    buy(product) {
        sessionStorage['product'] = JSON.stringify(product);

        var temp = sessionStorage.getItem('product');
        var productObj = JSON.parse(temp);
        //alert(productObj.id);

    }

    updatePrice(product): number {
        return 500 * product.cant;
    }

    updateQuantity(product): number {
        return 15 * product.cant;
    }

    showModal() {
     // this.modal.showModal();
    }


}

app.modal.ts

import { Component, OnInit, OnDestroy } from '@angular/core';
import { CommonService } from './common.service';
import { Subscription } from 'rxjs/Subscription';

@Component({
    selector: 'app-root',
    templateUrl: 'app/app.modal.html'
})

export class AppModal implements OnInit, OnDestroy {

    private subscription: Subscription;

    constructor(private commonService: CommonService) {

    }

    ngOnInit() {
        this.subscription = this.commonService.notifyObservable$.subscribe((res) => {
            if (res.hasOwnProperty('option') && res.option === 'onSubmit') {
                console.log(res.value);
                // perform your other action from here
                alert("llegamos");

            }
        });
    }

    ngOnDestroy() {
        this.subscription.unsubscribe();
    }

    showDialog = false;

    showModal() {

        this.showDialog = true;
    }
}

知道我做错了什么吗？感谢

Answer 1

因为 CommonService 是一项服务，您必须使用 providers @NgModule <的元属性声明它/ strong>如下所示，

@NgModule({ imports: [ BrowserModule, FormsModule, ], declarations: [ AppHeader, AppContent, AppFooter, AppModal, DialogComponent ], providers:[CommonService] //<---added this line bootstrap: [AppHeader, AppContent, AppFooter, AppModal] //<<---not sure why are you using AppContent, AppFoooter and AppModal stuffs for bootstrap !!! })

Answer 2

谢谢，它现在有效!!!关于bootstrap，我不确定我在做什么，但我删除它并且它没有工作......

错误：（SystemJS）模块'AppModule'声明的意外值'CommonService'

2 个答案: