Question

我必须使用2个组件LeftPanelComponent和RightPanelComponent。我提到this code for my implementation

我在两个组件之间创建了一个共享服务，从LeftPanelComponent调用RightPanelComponent的abc（）函数。

我将ListDialogComponent中的值读入LeftPanelComponent并传递给abc（）函数。

RightPanelComponent的abc（）函数从LeftPanelComponent成功调用。

但是当我在abc（）函数中调用saveCustomData（）angular 2服务时，我收到了以下错误。

EXCEPTION: Error in ./ListDialogComponent class ListDialogComponent - inline template:29:6 caused by: Cannot read property 'saveCustomData' of undefined

LeftPanelComponent.ts

import { Component, OnInit } from '@angular/core';
import {LeftpanelService} from "../leftpanel.service"
import {Leftpanel} from "../leftpanel";
import {MdDialog} from "@angular/material";
import {MdDialogRef} from "@angular/material";
import {ListDialogComponent} from "../list-dialog/list-dialog.component";
import {SharedService} from '../shared-service/shared-service.component';
@Component({
 selector: 'app-leftpanel',
 templateUrl: './leftpanel.component.html',
 styleUrls: ['./leftpanel.component.css']
})
export class LeftpanelComponent implements OnInit {
 dialogRef: MdDialogRef<any>;
 leftpanels:Leftpanel[];

 constructor(public dialog: MdDialog,private service:LeftpanelService, private sharedService: SharedService) {

 }

 ngOnInit() {
   this.service.getLeftpanels().subscribe(lst =>this.leftpanels=lst);
 }

 transferDataSuccess($event) {
   this.receivedData.push($event.dragData);
   this.openDialog();
 }
 openDialog() {
  this.dialogRef.afterClosed().subscribe(result => {
   console.log('result: ' + result);
   this.dialogRef = null;
   this.sharedService.componentOneFn(sessionStorage.getItem("value"));
  });
 }
 }

ListDialog.Component.html

<form class="form-group" >
<select name="itemid" #selectedCategory class="selectOption">
  <option value="">Choose Item</option>
  <option *ngFor="let Item of Items" value="{{Item.id}}" >{{Item.name}}</option>
</select>
<p></p>
<button  type="button" (click)="dialogRef.close('yes',getValueFromSelect(selectedCategory.value))" class="btn">Submit</button>
<button  type="button" (click)="dialogRef.close('no')" class="btn">Cancel</button>
</form>

ListDialogComponent.ts

import { Component,OnInit} from '@angular/core';
import {MdDialogRef} from "@angular/material";
import {Item} from '../item';
import {GetListService} from '../get-list.service';
@Component({
 selector: 'app-list-dialog',
 templateUrl: './list-dialog.component.html',
 styleUrls: ['./list-dialog.component.css']
})
export class ListDialogComponent implements OnInit {
 Items : Item[];
 serverItemID : string;
 constructor(public dialogRef: MdDialogRef<ListDialogComponent>,private service:GetListService) { }

 ngOnInit() {
  this.service.getItemList(this.oauthTokenService.getHeaders()).subscribe(lst =>this.Item=slst);
 }

 getValueFromSelect(value){
  sessionStorage.setItem('value',value);
 }
}

RightPanelComponent.ts

import {SaveCustomItem} from '../save-custom-item';
import {SaveCustomService} from '../save-custom.service';
import {SharedService} from '../shared-service/shared-service.component';

@Component({
 selector: 'app-rightpanel',
 templateUrl: './rightpanel.component.html',
 styleUrls: ['./rightpanel.component.css']
})
export class RightpanelComponent implements OnInit {
 componentData = [];
 componentData2 = [];
 saveCustomItems:saveCustomItem[];


constructor(public dialog: MdDialog, private service:SaveCustomService, private sharedService: SharedService) {
this.sharedService.componentOneFn = this.abc;
}
abc(value) {
 if(value == "MyValue") {
   this.service.saveCustomData(value).subscribe(lst =>this.saveCustomItems=lst);
 }
}
}

SharedService.ts

import {Injectable} from '@angular/core';
@Injectable()
export class SharedService {

 componentOneFn: Function;

 constructor() { }
}

SaveCustomService.ts

import { Injectable } from '@angular/core';
import {Http, Response, Headers} from "@angular/http";
import {Observable} from "rxjs/Rx";
import 'rxjs/Rx';
import {AppSettings} from './appsettings';
import {SaveCustomItem} from './save-custom--item';

@Injectable()
export class SaveCustomService {

  constructor(private http:Http) { }

  saveCustomData(value):Observable<SaveCustomItem[]> {
    let response = this.http.get(`${AppSettings.BACK_ENDPOINT}/ajax/save-custom-data?value=`+value);
    let saveCustomItems = response.map(mapSaveCustomData);
    return saveCustomItems;
  }
}

function mapSaveCustomData(response:Response):SaveCustomItem[] {
 return response.json().results.map(toSaveCustomData);
}

function toSaveCustomData(r:any):SaveCustomItem {
 let saveCustomeItem = <SaveCustomItem>({
   id:r.server,
   title:r.title
 });
 return saveCustomeItem;
}

Answer 1

在SaveCustomService中，您要在类clousure括号}之外声明您的方法。

应该是这样的：

@Injectable()
export class SaveCustomService {

    constructor(private http: Http) {
    }

    saveCustomData(value): Observable<SaveCustomItem[]> {
        let response = this.http.get(`${AppSettings.BACK_ENDPOINT}/ajax/save-custom-data?value=` + value);
        let saveCustomItems = response.map(mapSaveCustomData);
        return saveCustomItems;
    }

    mapSaveCustomData(response: Response): SaveCustomItem[] {
        return response.json().results.map(toSaveCustomData);
    }

    toSaveCustomData(r: any): SaveCustomItem {
        let saveCustomeItem = <SaveCustomItem>({
            id: r.server,
            title: r.title
        });
        return saveCustomeItem;
    }
}

修改

无法读取未定义
的属性'saveCustomData'

表示this.service中的this.service.saveCustomData未定义。

因此，我认为您应该检查并确保导入中的../shared-service/shared-service.component是正确的路径。

另请注意在模块SharedService中添加providers：

@NgModule({ providers: [SharedService]

<强> EDIT2：

只是小费。您可以为概念块或范围创建1个服务。并使用它在共享相同概念块或范围的组件之间传递数据。

在文档：https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#bidirectional-service中，您可以看到如何使用1个服务将数据从任务组件传递到宇航员组件，它们都属于一个概念块：“宇航员执行任务”。

同样的事情将适用于这些更常见的概念范围：“用户”，“订单”，“付款”等。

您无需创建服务A即可调用服务方法B.直接致电服务B.

Answer 2

我解决了我的问题。我在SharedService，LeftPanelComponent和RightPanelComponent中进行了一些修改。

SharedService.ts

import {Injectable} from '@angular/core';
@Injectable()
export class SharedService {

// Observable string streams
componentMethodCalled$ = this.componentMethodCallSource.asObservable();

// Service message commands
callRightPanelComponentMethod() {
 this.componentMethodCallSource.next();
}
}

RightPanelComponent.ts

import {SaveCustomItem} from '../save-custom-item';
import {SaveCustomService} from '../save-custom.service';
import {SharedService} from '../shared-service/shared-service.component';

@Component({
 selector: 'app-rightpanel',
 templateUrl: './rightpanel.component.html',
 styleUrls: ['./rightpanel.component.css']
})
export class RightpanelComponent implements OnInit { 
 saveCustomItems:saveCustomItem[];

 constructor(public dialog: MdDialog, private service:SaveCustomService, 
  private sharedService: SharedService) {
  this.sharedService.componentMethodCalled$.subscribe(
    () => {
    this.abc();
    }
  );
 }
 abc(value) {
   if(value == "MyValue") {
     this.service.saveCustomData(value).subscribe(lst =>this.saveCustomItems=lst);
 }
 }
 }

RightPanelComponent.ts

openDialog() {
 this.dialogRef.afterClosed().subscribe(result => {
  console.log('result: ' + result);
  this.dialogRef = null;
  this.sharedService.callRightPanelComponentMethod();
 });
}

无法从另一个组件调用组件的角度2服务

2 个答案: