我正在構建離子角度應用程式并且是新手（專業PHP）
我有一個頁面，其中包含以下內容：
export class LicencesTabPage implements OnInit {
public licencesData: any[] | void;
constructor(
protected licenceService: LicencesService,
protected authService: AuthenticationService,
protected modelController: ModalController,
public conversions: DatetimeConversions,
) {
}
async ngOnInit() {
this.getData();
}
async openDetailedModel(index) {
const modal = await this.modelController.create({
component: LicencesDetailedComponent,
componentProps: {
itemDetail: this.licencesData[index]
}
});
modal.onDidDismiss().then((modelData) => {
this.getData();
if (modelData !== null) {
}
});
return await modal.present();
}
protected async getData() {
const userUUID = await this.authService.getStoredUuid();
await this.licenceService.getLicences(userUUID).then(res => {
this.licencesData = JSON.parse(JSON.stringify(res));
});
}
}
從此用戶可以使用 openDetailedModel 方法打開模型組件。
這是模態組件：
export class LicencesDetailedComponent implements OnInit {
@Input()
public itemDetail: any = [];
protected returnValue: any;
public editItem = false;
public licencesCommonFunctions: LicencesCommonFunction;
constructor(
protected modalController: ModalController,
) {
this.licencesCommonFunctions = new LicencesCommonFunction();
}
ngOnInit() {
}
openEdit() {
}
closeEdit() {
this.editItem = false;
}
/**
*
* @param form
*/
updateLicence(form: NgForm) {
this.itemDetail = this.licencesCommonFunctions.newItem;
this.licencesCommonFunctions.updateLicence(form);
}
}
并且由此用戶可以呼叫 updateLicence() 方法，該方法呼叫 updateLicence() 插入 licencesCommonFunctions 類。
這是 licencesCommonFunctions 類的縮短版本
export class LicencesCommonFunction implements OnInit {
public newItem: any;
protected licencesService: LicencesService;
constructor() {
}
ngOnInit() {
}
/**
*
* @param form
*/
updateLicence(form: NgForm) {
this.licencesService.updateLicence(this.newItem).then(() => {
this.showToast('Updated');
});
}
}
正如所見，updateLicence 方法是從呼叫 updateLicence 的模態組件呼叫的，該組件是 LicencesService 的一部分
但是，當我嘗試從模態組件執行此操作時，出現以下錯誤：無法讀取未定義的屬性（正在讀取“updateLicence”）
但是，如果我從頁面中呼叫相同的內容，那么它可以正常作業，因此當從模式中的任何位置呼叫時，似乎沒有注冊 LicencesService。
我想知道是否有人知道如何解決這個問題？
uj5u.com熱心網友回復：
您沒有在任何地方使用依賴注入。在您的頁面中，您執行以下操作：
constructor(
protected licenceService: LicencesService,
protected authService: AuthenticationService,
protected modelController: ModalController,
public conversions: DatetimeConversions,
) {
}
依賴注入插入 licenseService 實體的地方。
但是，您的模態組件會嘗試更新它自己的依賴項：
constructor(
protected modalController: ModalController,
) {
this.licencesCommonFunctions = new LicencesCommonFunction();
}
然后你的 licensesCommonFunctions 根本沒有更新服務，但也沒有注入它：
protected licencesService: LicencesService;
constructor() {
}
所以實際上，任何通過您的 CommonFunction 呼叫 licensesService 的東西都會有問題。
我建議您的第一個呼叫埠是使您的常用功能可注入
@Injectable({
providedIn: 'root'
})
export class LicencesCommonFunction {
constructor(private licensesService : LicensesService) {
}
}
（同時洗掉 OnInit，因為這僅適用于組件，不適用于服務）。然后通過建構式使用依賴注入將其注入到您的組件中。
總體而言，了解依賴注入如何與 Angular 一起作業將對您有所幫助。如果您在 Angular 中“更新”服務，那么如果這些服務不僅僅是靜態輔助函式，那么您很可能做錯了什么。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/450136.html