無法從另一個組件調用組件的角度2服務

我必須使用2個組件LeftPanelComponent和RightPanelComponent。我提到this code for my implementation 無法從另一個組件調用組件的角度2服務

我在兩個組件之間創建了一個共享服務，以從LeftPanelComponent調用RightPanelComponent的abc（）函數。

我正在從ListDialogComponent讀取值到LeftPanelComponent並傳遞給abc（）函數。

RightPanelComponent的abc（）函數從LeftPanelComponent成功調用。

但是，當我在abc（）函數中調用saveCustomData（）的角度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; 
}

來源

2017-04-12 Anil Jagtap

仔細檢查'../共享服務/共享service.component'是正確的路徑 – SrAxi

你可以添加'list-dialog.component.html'代碼嗎？ – SrAxi

添加SaveCustomService的代碼。 – Faly

在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是正確的路徑。

還記得在你的模塊providers添加SharedService：

@NgModule({ 
    providers: [SharedService]

EDIT2：

只是一個提示。您可以爲概念塊或範圍創建1個服務。並用它在共享相同概念塊或範圍的組件之間傳遞數據。

在文檔：https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#bidirectional-service中，您將看到如何使用1個服務將數據從Mission Component傳遞給宇航員組件，它們都屬於一個概念塊：「宇航員執行任務」。

同樣的事情將應用於這些更常見的概念範圍：'用戶'，'訂單'，'付款'等。

你並不需要創建一個服務呼叫服務B.呼叫的方法直接服務B.

來源

2017-04-12 09:50:49 SrAxi

感謝您的回覆。但你的答案不起作用。 –

@AnilJagtap檢查編輯我的答案。我會繼續查看是否找到任何其他錯誤原因。 – SrAxi

我已經保留提供程序中的sharedService。仍然有問題。我需要做什麼？ –

我解決我的問題。我在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(); 
}); 
}

來源

2017-04-13 07:06:05

無法從另一個組件調用組件的角度2服務

回答

相關問題