在新标签中打开新窗口答案

【问题标题】：Open new window in new tab在新标签中打开新窗口
【发布时间】：2017-04-07 04:55:13
【问题描述】：

当用户点击按钮时，我正在尝试打开一个新窗口，如下所示：

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

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

【问题讨论】：

window.open('some url'); 可以工作，但如果你想使用 angular-universal，你会避免直接操作窗口。
所以有没有可能
我有这个要求，所以如果您有任何解决方法请提出建议
我不习惯 angular-universal 但我看到你可以访问变量isBrowser（据我所知）。因此，请使用 DI 将这个变量注入您的应用程序，以便您可以在任何地方使用它。然后，当您必须使用 window.open 时，只需像这样包装它：if (isBrowser) { window.open('some url) }
@Rhushikesh，我在 angular2 应用程序中使用 mvc 的弹出窗口打开要求苦苦挣扎，您能否提供示例代码，您如何在应用程序中打开浏览器弹出窗口。

标签： angular typescript tabs window

【解决方案1】：

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

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

所以你所要做的只是改变你捕捉打开标签的引用的变量名

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

但是，这不是推荐的方法，因为 angular2 应用程序可以在各种环境中运行，例如移动或呈现在服务器端，window 对象可能可用也可能不可用。更不用说在测试中模拟窗口对象会非常困难

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

服务文件

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

【讨论】：

不适合我，我需要在模块文件的提供者中调用它吗？
@HidaytRahman 是的。您需要在模块文件中的提供程序中调用它