Question

我很困惑，需要一个小指南，我有一个名为ItemsActionsDynamicComponent的组件类，它使用名为ItemsActionsDynamicService的可注释服务发送所有HTTP请求。

现在我使用另一个名为JquiDialogLauncher的指令，我正在尝试使用ItemsActionsDynamicService按下确认按钮以发送HTTP请求，同时执行此操作我得到Cannot read property 'postSyncItemFromSource' of undefined

ItemsActionsDynamicComponent：

import {Component, ElementRef, Input, ViewChild} from '@angular/core';
import {Http} from "@angular/http";
import {ItemsActionsDynamicService} from "./item-actions-dynamic.service";
import {FadeInTop} from "../../../../shared/animations/fade-in-top.decorator";
import {ModalComponent} from "ng2-bs3-modal/components/modal";


declare var $: any;
@FadeInTop()
@Component({
    selector: 'items-actions-dynamic',
    templateUrl: './items-actions-dynamic.component.html',
    providers: [ItemsActionsDynamicService]
})
export class ItemsActionsDynamicComponent {


    constructor(... private _itemsActionsDynamicService: ItemsActionsDynamicService) {

    }

    ..


    syncItemDialogOptions = {
        autoOpen : false,
        width : 600,
        resizable : false,
        modal : true,
        closeText: '',
        title : "<div class='widget-header'><h4><i class='fa fa-warning'></i> Sync Item</h4></div>",
        buttons : [{
            html : "<i class='fa fa-trash-o'></i>&nbsp; Ok",
            "class" : "btn btn-danger",
            click : function() {
                this._itemsActionsDynamicService.postSyncItemFromSource();
                $(this).dialog("close");
            }
        }, {
            html : "<i class='fa fa-times'></i>&nbsp; Cancel",
            "class" : "btn btn-default",
            click : function() {
                $(this).dialog("close");
            }
        }]
    };

    public syncItem() {
        console.log("syncItem")
        this._itemsActionsDynamicService.postSyncItemFromSource(itemUUID);
    }

}

items-actions-dynamic.component.html：

<button class="btn btn-default btn-xs"  (click)="syncItem()">Test Sync Item</button>

<button class="btn btn-default btn-xs"  saJquiDialogLauncher="#sync-item-dialog">Sync Item</button>

<div id="sync-item-dialog" [saJquiDialog]="syncItemDialogOptions">
</div>

JquiDialogLauncher：

@Directive({
  selector: '[saJquiDialogLauncher]'
})
export class JquiDialogLauncher {
  @Input() saJquiDialogLauncher: any;

  @HostListener('click', ['$event']) onClick(e) {
    $( this.saJquiDialogLauncher ).dialog( "open" );
  }

  constructor(private el: ElementRef) { }

}

单击“测试同步项”时，一切正常，点击“同步项目”即可获得cannot read property 'postSyncItemFromSource' of undefined

为了使Sync Item有效，我做了什么shell？将ItemsActionsDynamicService注入JquiDialogLauncher指令？如果是这样我怎么用这个方法呢？

使用来自Directive和Component angular2的Injectable服务

0 个答案: