单击Angular 2中的按钮时如何执行全屏窗口功能？答案

【问题标题】：How to do FULL SCREEN WINDOW functionality while clicking the button in Angular 2?单击Angular 2中的按钮时如何执行全屏窗口功能？
【发布时间】：2018-08-21 09:03:38
【问题描述】：

我已经为用户创建了登录页面。如果他们单击提交按钮，页面将导航到一个组件（test.component.ts、test.component.html、..）。

我需要将该窗口设为全屏模式。比如，（html5中的视频控制全屏）。

submitLogin() {
  if (this.userName === 'Student' && this.passWord === 'student@123'){
    this.dashboard = true; 
  } else {
    alert('Incorrect Username or Password');
  }
}

我不知道如何实现全屏窗口功能。因为，我是 Angular2 的新手。谁能解决我的问题？

【问题讨论】：

标签： typescript angular2-routing angular2-services angular2-directives

【解决方案1】：

以下代码仅适用于较新版本的浏览器。根据您的问题，我确实分析了，单击按钮后会调用 submitLogin() 。所以，点击按钮后，可以使用下面的方法实现全屏。

   submitLogin() {
     this.toggleFullScreen();
     if(this.userName == "Student" && this.passWord == "student@123"){
      this.dashboard = true; 
     }
     else{
       alert("Incorrect Username or Password");
      }
   }

   toggleFullScreen() {
    let elem =  document.body; 
    let methodToBeInvoked = elem.requestFullscreen || 
     elem.webkitRequestFullScreen || elem['mozRequestFullscreen'] || 
     elem['msRequestFullscreen']; 
    if(methodToBeInvoked) methodToBeInvoked.call(elem);

}

您可以前往以下链接阅读更多内容。 Documentation

更新： ActiveXObject 仅在 IE 浏览器上可用。因此，所有其他用户代理都会抛出错误。您可以使用以下代码：

 toggleFullScreen() {
        let elem =  document.body; 
        let methodToBeInvoked = elem.requestFullscreen || 
         elem.webkitRequestFullScreen || elem['mozRequestFullscreen'] 
         || 
         elem['msRequestFullscreen']; 
        if(methodToBeInvoked) methodToBeInvoked.call(elem);

    }

【讨论】：

谢谢。但是，我在哪里声明这个 requestFullScreen ？和 ActiveXObject ？它在我的代码上显示红色下划线。
你可以像这样使用它们。 elem['requestFullScreen'] 和 window['ActiveXObject']。如果这不能解决问题，请将错误消息转发给我。如果是，请将我的答案标记为最佳答案。谢谢。 :)
如果这对我有用，我肯定会将您的答案指向最佳答案。让 obj = new ActiveXObject("WScript.Shell");我必须在这条线上做什么？它在此特定行中显示找不到名称“ActiveXObject”。
非常感谢。这对我有用.. 感谢您的帮助。
@skydev [stackoverflow.com/questions/51834858/…

【解决方案2】：

检查这个库fscreen你不必担心供应商前缀，代码更干净，我为一个角度应用程序做了它，这是我写的代码：

hasFullscreenSupport: boolean = fscreen.fullscreenEnabled;
isFullscreen: boolean;

constructor() {
  if (this.hasFullscreenSupport) {
    fscreen.addEventListener('fullscreenchange', () => {
      this.isFullscreen = (fscreen.fullscreenElement !== null);
    }, false);
  }
}

ngOnDestroy() {
  if (this.hasFullscreenSupport) {
    fscreen.removeEventListener('fullscreenchange');
  }
}

toggleFullscreen() {
  if (this.hasFullscreenSupport && !this.isFullscreen) {
    const elem = document.body;
    fscreen.requestFullscreen(elem);
  } else {
    fscreen.exitFullscreen();
  }
}

【讨论】：

我的经验是 fscreen.removeEventListener 方法必须与相关的 addEventListener 方法具有相同的参数。