在新标签页中打开新 window

Question

我正在尝试在用户单击按钮时打开一个新的 window，如下所示：

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

如何更正它以使其正常工作？

Answer 1

window 变量成为 undefined 的原因是 您在本地范围内再次声明了一个名为 window 的变量 .

根据javascript/typescript的作用域规则，在访问全局变量之前，先查找局部变量值。此外，当您最初声明一个变量时，它被设置为未定义，因此您收到错误消息。

因此，您只需更改捕获打开的选项卡引用的变量名称

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

然而，这不是推荐的方法，因为 angular2 应用程序可以运行在各种环境中，例如移动或呈现服务器端，其中 window 对象可能可用也可能不可用。更不用说在测试

中模拟 window 对象是非常困难的

相反，您可以将 window 对象包装在一个服务中，然后将该服务注入到您的组件中。这样你就可以根据环境简单地替换 service 实现，使用 Dependency injection

服务文件

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

在新标签页中打开新 window

Open new window in new tab

tabs

window

typescript

angular