How to do FULL SCREEN WINDOW functionality while c

问题:

I have created the login page for the user. If They click the submit button, the page will navigate to one component (test.component.ts,test.component.html,..).

I need to make that window in full screen mode. like, (video control full screen in html5).

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

I don't know how to achieve the full screen window functionality. Because, i am new to Angular2. Can Anyone solve my problem ?.

回答1:

The following code will only be feasible for newer versions of browsers. From your question, I do analyze that, submitLogin() is called after clicking the button. So, after clicking the button, you can achieve full screen using the following approach.

   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);

}

You can go to the following link to read more. Documentation

Updated: ActiveXObject is available only on IE browser. So every other useragent will throw an error. You can use the following code:

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

    }

回答2:

Check this library fscreen you wont have to worry about vendor prefixes, code is way cleaner, i did it for an angular app and this is the code i wrote:

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();
  }
}