Я создал страницу входа для пользователя. Если они нажмут кнопку отправки, страница перейдет к одному компоненту (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. Кто-нибудь может решить мою проблему?

1
Sakkeer A 13 Мар 2018 в 10:31

2 ответа

Лучший ответ

Следующий код будет доступен только для новых версий браузеров. Судя по вашему вопросу, я анализирую это, 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);

}

Вы можете перейти по следующей ссылке, чтобы узнать больше. Документация

Обновлено: ActiveXObject доступен только в браузере IE. Таким образом, любой другой пользовательский агент выдаст ошибку. Вы можете использовать следующий код:

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

    }
2
Niraj Paudel 26 Мар 2018 в 13:13

Проверьте эту библиотеку fscreen, вам не придется беспокоиться о префиксах поставщиков, код намного чище, я сделал это для приложение angular, и это код, который я написал:

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();
  }
}
1
Sonicd300 19 Сен 2018 в 15:25