从 Angular2 组件中关闭 Polymer 对话框

Question

我有一个纸质对话tags.page.html

<paper-dialog id="test" #tagDialog>
  <h2>Tag Dialog</h2>
  <tags-form [tag]="tagNameRef.value" [formState]="tagsFormState_ | async" (tag_)="onSaveTag($event)"></tags-form>
</paper-dialog>

里面有一个 Angular2 组件 TagsForm。我想在用户单击 TagsFrom 的方法 onClose() 时关闭对话框。

我试过了，但没用...

onClose() {
    let event = new CustomEvent('iron-overlay-canceled',{
        detail:{canceled:false},
        bubbles: true,
        cancelable: false
    });
    this.elem.dispatchEvent(event);        
}

我做错了什么？我在想调度事件应该关闭模式。任何关于为什么这不起作用以及如何让它起作用的指示都将不胜感激。

Answer 1

事件 iron-overlay-canceled 在取消覆盖时触发，但在 之前它不会关闭对话框。

close: function() {
  this._setCanceled(false);
  this.opened = false;
},
cancel: function(event) {
  var cancelEvent = this.fire('iron-overlay-canceled', event, {cancelable: true});
  if (cancelEvent.defaultPrevented) {
    return;
  }
  this._setCanceled(true);
  this.opened = false;
},

(Github source)

您可以订阅此事件，但如果您想关闭对话框，则必须在对话框组件上触发 close 或 cancel 方法。

如果您将调用 cancel 方法，那么它将触发上面提到的 iron-overlay-canceled 并关闭对话框。 close 相应的方法将关闭对话框。

实现此目的的最简单方法是使用 EventEmitter，如下所示：

标签-form.component.ts

@Output() closeDialog = new EventEmitter();
onClose() {
  this.closeDialog.emit()
}

tags.page.html

<paper-dialog id="dialog" #tagDialog>
  <h2>Tag Dialog</h2>
  <tags-form (closeDialog)="tagDialog.close()"></tags-form>
</paper-dialog>

Plunker Example

从 Angular2 组件中关闭 Polymer 对话框

Closing a Polymer Dialog from within a Angular2 component

paper-elements

polymer-1.0

angular