angular6 - Angular 6 component inside the alertifyjs

Question

I want to use the alertifyjs with angular 6. And want to embed angular component into the alertifyjs body.

Example code:

import * as _alertify from 'alertifyjs';
_alertify.alert('Title' , '<app-custom-component></app-custom-component>');

or

_alertify.alert('My Title', '<dx-data-grid ...>...</dx-data-grid>');

Example image with Devextreme datagrid

How can I do embed the angular component into the alertifyjs? Or, can I do?

Thanks.

Answer 1

您不能将整个组件作为正文内容传递。根据 alertifyjs Docs，它支持将标题和正文内容作为字符串。所以你可以传递component.elementref.nativeElement.innerHTML。

模板：

<app-custom-component #customcomp></app-custom-component>

零件：

@ViewChild('customcomp') customcomp : ElementRef;

ngAfterViewInit(){
   _alertify.alert('Title' , this.customcomp.nativeElement.innerHTML);
}