Jak otworzyć nowe okno w nowej karcie w angular2

Question

Próbuję otworzyć nowe okno, gdy użytkownik kliknie na przycisk jak postępować

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

ale rzuca błąd,

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

popraw mi, żeby to działało.

Answer 1

Powodem window zmienna jest undefined jest fakt, że zostały uznane za okno zmiennej o nazwie ponownie w lokalnym zakresie.

Zgodnie z regułami ustalania zakresu javascript/typescript, przed uzyskaniem dostępu do zmiennej globalnej, wartość zmiennych lokalnych jest sprawdzana. Również gdy początkowo zadeklarujesz zmienną, jest ona niezdefiniowana, stąd pojawia się komunikat o błędzie.

Więc wszystko co musisz zrobić, to po prostu zmienić nazwę zmiennej, w której uchwycić odniesienia otwartym Tab

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

jednak nie jest to zalecane podejście jak angular2 aplikacje mogą pracować w różnych środowiskach, takich jak: mobilne lub renderowane po stronie serwera, gdzie obiekt window może być lub może nie być dostępny. Nie wspominając, że byłoby bardzo trudno sfałszować obiekt okna w testach. Zamiast tego można owinąć obiekt window w usługę i wprowadzić tę usługę do komponentu. W ten sposób można po prostu zastąpić realizację serwis w zależności od środowiska, z wykorzystaniem Dependency Injection

plik Service

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

    getNativeWindow() { 
     return window; 
    } 
} 

pliku komponentu okno

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