代码之家 › 专栏 › 技术社区 › Sakkeer A

如何在单击Angular 2中的按钮时实现全屏窗口功能?

angular2-directives angular2-services angular2-routing typescript

Sakkeer A · 技术社区 · 8 年前

我已经为用户创建了登录页面。如果他们单击提交按钮,页面将导航到一个组件(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还不熟悉。有人能解决我的问题吗?。

2 回复 | 直到 7 年前

nirazlatu 8 年前

以下代码仅适用于较新版本的浏览器。根据您的问题,我确实分析了这一点,在单击按钮后调用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);

    }

Sonicd300 7 年前

检查此库 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();
  }
}