Question

我是Angular的新手，我试图在Angular 4中弹出一个页面加载时要求用户提供电子邮件的弹出窗口。我用谷歌搜索，但找不到一个示例。我可以为该任务使用的最佳服务是什么，通常如何完成？

Answer 1

启动终端并输入：npm install @ ngui / overlay

在您的app.module.ts中：

import { appComponent      } from './app.component';    
import { NguiOverlayModule } from '@ngui/overlay';

@NgModule
({
  declarations: [appComponent     ],
  imports:      [NguiOverlayModule]
});

在您的app.component.ts中：

import { NguiOverlayManager } from '@ngui/overlay';
import { Component, OnInit  } from '@angular/core';

@Component
({
    selector    : 'app-root',
    templateUrl : './app.component.html'
})
export class appComponent  implements OnInit
{ 
    constructor
    (
        public  _overlayManager : NguiOverlayManager
    ){}

    openPopUp()
    {
        this._overlayManager.open('popup-modal', 1);
    }
    closePopUp()
    {
        this._overlayManager.close('popup-modal');
    }

    ngOnInit()
    {
        this.openPopUp();
    }
}

在您的app.component.html中：

<div id="popup-modal" ngui-overlay-of="window">
   <!-- Popup content goes here -->
</div>

Answer 2

使用Bootstrap，您可以使用以下方法。

First install ngx-bootstrap npm module using below CLI command.
npm install ngx-bootstrap


Now import ngx-bootstap module in your root module like this :
import { ModalModule } from 'ngx-bootstrap/modal';

@NgModule({ 
  imports: [
    ModalModule.forRoot()
  ]
});


Than import that module in your ts file and use it like this :
import { ModalDirective } from 'ng2-bootstrap';

// @ViewChild('Same name as your html #Model name') define any name : ModalDirective;
@ViewChild('myModel') myModel: ModalDirective;


// Now use this code to when you want open model :
this.myModel.show();

// Now use this code to when you want hide model :
this.myModel.hide();

In your case you need to call like this
  
ngOnInit(){
  this.myModel.show();
}

In Your HTML File paste this code :

<div class="modal fade" bsModal #myModel="bs-modal"
    tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-md">
        <div class="modal-content">        
        ..
        // Write your html here      
        ..
        </div>
     </div>
</div>

在Angular 4中加载页面时显示弹出窗口

2 个答案: