如何在angular2中的新选项卡中打开新窗口

前端之家收集整理的这篇文章主要介绍了如何在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

请纠正我的工作.

窗口变量未定义的原因是您已经在本地作用域中再次声明了一个名为window的变量.

根据javascript / typescript的范围规则,在访问全局变量之前,会查找局部变量值.
此外,当您最初声明一个变量时,它被设置为undefined,因此您收到的错误消息.

所以您只需更改捕获打开的选项卡引用的变量名称即可

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

然而,这不是推荐的方法,因为angular2应用程序可以在各种环境中运行,例如移动或在窗口对象可能不可用的情况下呈现服务器端.更不用说在测试中模拟窗口对象很难

相反,您可以将窗口对象包装在服务中,并将该服务注入到组件中.这样,您可以根据环境简单地替换服务实现,使用依赖注入

---- the service file ----

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

    getNativeWindow() {
        return window;
    }
}

----- the component file-----

@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);
    })
}
原文链接:https://www.f2er.com/angularjs/140459.html

猜你在找的Angularjs相关文章