Как открыть новое окно на новой вкладке в angular2

Я пытаюсь открыть новое окно, когда пользователь нажимает кнопку, следуя

protected assignActity(type: string): void {
    var window = window.open('/#/link');
    this.Service.assignActivity(type).subscribe(res => {
      window.location = '/#/link/' + res;
      console.log(res);
    })
  }

но он выдает ошибку,

core.umd.js:3468 TypeError: Cannot read property 'open' of undefined

пожалуйста, поправьте меня, чтобы он работал.

Ответ 1

Причиной переменной window является undefined является тот факт, что вы снова объявили переменную с именем window в локальной области.

В соответствии с правилами определения области javascript/typescript, перед тем как глобальная переменная будет доступна, значение локальных переменных проверяется. Также, когда вы изначально объявляете переменную, она устанавливается на undefined, поэтому появляется сообщение об ошибке.

Итак, все, что вам нужно сделать, это просто изменить имя переменной, в которой вы открываете ссылку с открытой вкладкой

var newWindow = window.open('some_url');

Однако это не рекомендуемый подход, так как angular2 приложения могут запускаться в различных средах, таких как мобильные или отображаемые на стороне сервера, где объект window может быть или не быть доступен. Не говоря уже о том, что было бы очень сложно высмеять объект окна в тестах

Вместо этого вы можете обернуть объект window в службу и внедрить эту службу в свой компонент. Таким образом, вы можете просто заменить реализацию службы в соответствии с окружающей средой, используя инъекцию зависимостей

Сервисный файл

@Injectable()
export class WindowRef {
    constructor() {}

    getNativeWindow() {
        return window;
    }
}

Файл компонента

@Component({
  selector : 'demo',
  template : '<div> Demo </div>'
})
class DemoComponent {

   nativeWindow: any
   constructor( private winRef: WindowRef ) { 
       this.nativeWindow = winRef.getNativeWindow();
   }

    protected assignActity(type: string): void {
       var newWindow = this.nativeWindow.open('/#/link');
       this.Service.assignActivity(type).subscribe(res => {

       newWindow.location = '/#/link/' + res;
       console.log(res);
    })
}