angular - 在新分頁中開啟新視窗

我正在嘗試在使用者點擊按鈕時打開一個新窗口，如下所示：

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 物件將非常困難。

相反，你可以將 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);
    })
}