Закрытие Polymer Диалог внутри компонента Angular2

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. Я хочу закрыть диалоговое окно, когда пользователь нажимает на метод onClose() из TagsFrom.

Я попытался это, но он не работает ...

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