组件功能绑定不适用于模板

时间:2020-01-30 20:53:24

标签: angular typescript

我有一个delete-media组件:

@Component('Project', {
    selector: 'delete-media',
    templateUrl: '/AttachmentListComponent/deleteMedia.html',
    bindings: {
        onDelete: '&'
    }
})
@Inject('$mdDialog', 'MediaResourceProvider')
export class DeleteMediaComponent {

    public onDelete: Function;
    public deleteMedia():void {
        this.onDelete();
    }
}

在模板中,我有一个调用onDelete函数的按钮:

<md-button class="md-primary md-confirm-button" ng-click="vm.deleteMedia()">
    delete
</md-button>

我从delete-media加载了这个attachmentListComponent组件:

public deleteMediaAction(mediaItem: MediaModel): void {
    const templateType = this.mediaIsDeletable && !this.mediaIsDeleted ? 'delete-media' : 'show-deleted-media-information'
    const template = `<${templateType}
        media-item="${mediaItem}"
        on-delete="vm.deleteMedia()"
        ></${templateType}>`;

    this.$mdDialog
        .show({
            template,
            targetEvent: null,
            clickOutsideToClose: false
        })
}

public deleteMedia(){
    console.log('delete');
}

当我单击deleteMedia()组件中的attachementListComponent按钮时,我想在delete中调用delete-media方法。但是我现在的操作方式不起作用。

当我将delete-media组件直接添加到我的attachmentList.html中时(它是attachmentListComponent的模板,如下所示:

<delete-media
    on-delete="vm.deleteMedia()">
</delete-media>

然后单击delete组件中的delete-media按钮,它确实会调用deleteMedia()中的attachmentListComponent方法。

当我直接在on-delete="vm.deleteMedia()"中加载delete-media组件时,似乎attachementListComponent绑定不起作用,但是当我在{的模板中加载该组件时,它确实起作用了{1}}。

有什么建议吗?

1 个答案:

答案 0 :(得分:0)

不要使用绑定将数据从mdDialog传递回父对象。您可以使用.hide()和.then()。

在我的<delete-media>组件中,我向this.$mdDialog.hide();方法中添加了deleteMedia()。这将隐藏对话框。但这也会给父级回调。

所以在我的attachmentListComponent中,我有:

this.$mdDialog
    .show({
        template,
        targetEvent: null,
        clickOutsideToClose: false
    })
    .then(() => {
        this.deleteMedia();
    });

public deleteMedia(){
    console.log('delete');
}

关闭(隐藏)mdDialog时将调用.then