在Ionic 3中动态创建组件

Question

我想在页面上添加自定义的Toast消息，因为ToastController不支持HTML消息内容。我创建了一个叠加层：

import { Component, AfterViewInit, ElementRef, Renderer2, Input } from '@angular/core';
//import { Nav } from 'ionic-angular';

@Component({
  selector: 'overlay',
  templateUrl: 'overlay.html'
})
export class OverlayComponent implements AfterViewInit {
  //@ViewChild(Nav) nav: Nav;
  @Input('show') show: boolean = false;

  constructor(
    private elementRef : ElementRef,
    private renderer : Renderer2,
    //public navCtrl: NavController
  ) {}

  ngAfterViewInit() {
    this.renderer.addClass( this.elementRef.nativeElement, 'shown' );
  }

  hide_overlay() {
    console.log('hiding overlay');
    //this.navCtrl.pop();
    //this.renderer.removeClass( this.elementRef.nativeElement, 'shown');
  }
}

overlay {
  display: none;

  &.shown {
    display: block;
    position:absolute;
    top:10%;
    left:50%;
    transform:translate(-50%, -50%);
    color: white; background: #666666; opacity: .9;
    z-index: 9999;
  }

}

只要我将<overlay>添加到每个组件的模板中，覆盖层就可以工作。但是我不想那样做。我想将覆盖层动态注入到任意组件中……就像吐司消息一样。

我尝试创建一个toast.service.ts，但是我不知道如何访问viewContainerRef，因此我可以使用viewContainerRef.createComponent(componentFactory);将覆盖图插入到当前页面模板中。与此stackblitz类似（仅以纯角度完成）。