Question

嗨，我已经使用下面的方法使用角度5打开了一个窗口

 var opened = window.open("localhost:4200/#/url");

上面的代码将重定向到另一个外部URL。我想访问重定向网址。

我尝试了以下代码

console.log(opened.location.href);

但正在给予这样的关注

关于：空白

同一件事在javascript中起作用

console.log(window.location.href);

我需要在角度5中做同样的事情。是否有可能。

请帮助我解决问题。

谢谢。

Answer 1

同一来源的两个窗口之间的通信可以通过多种方式完成，其中一种方式是使用localStorage或sessionStorage。更改localStore或sessionStorage变量的值可以在多个窗口中跨应用程序侦听。

因此，当您打开一个子窗口时，开始侦听存储变量的更改，并在子窗口加载后立即在本地存储中设置新加载的URL，以便父级可以捕获它。最后，只需删除事件监听器即可。

希望这会有所帮助。

[升级版解决方案，请检查您的 stackblitz 链接后]：

当我们以编程方式打开新窗口时，我们知道其初始URL状态将为空白，然后javascript起作用并加载请求的URL。但是，据我们所知，Angular在捕获本地JavaScript变量更改方面总是存在问题，这里也发生了同样的事情。 Angular最近仅知道初始状态blank，但不知道加载的URL。

要解决此问题，也许您可以使用window.OnChildWindowLoaded。

父母：

export class AppComponent  {
  name = 'Angular';
  urlopened;
  opengoogle(){
    window.OnChildWindowLoaded = function (href) {
        console.log('Opened ' + href + ' successfully');
    };
    this.urlopened = window.open("https://stackblitz.com","");
  }
}

孩子：

<script>
  window.onload = function () {
    window.opener.OnChildWindowLoaded(location.href);
  };
</script>

Answer 2

您可以通过router Event获取网址：

赞：

import { Component, NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { Router, NavigationEnd,NavigationStart } from '@angular/router';

@Component({
  selector: 'my-app',
  template: 
    `<a routerLink='A'>A</a>
    <a routerLink='B'>B</a>
    <router-outlet></router-outlet>`,
})
export class AppComponent  {
  constructor(private router: Router) {}

   ngOnInit() {
    this.router.events.subscribe(event => {
          if(event instanceof NavigationStart) {
        console.log("NavigationStart",event.url)
        // alert('navigation succeeded');
      }
      if(event instanceof NavigationEnd) {
        console.log("NavigationEnd",event.url)
        // alert('navigation succeeded');
      }
    })
  }
}

@Component({
  selector: 'app-a',
  template: '<h1>A</h1>',
})
export class AComponent  {}

@Component({
  selector: 'app-b',
  template: '<h1>B</h1>',
})
export class BComponent  {}

const routes: Routes = [
  { path: 'A', component: AComponent },
  { path: 'B', component: BComponent }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class RootRoutingModule { }

在这里您可以在两个console.log中看到路由器的URL。

Angular 5访问外部窗口对象URL，该URL通过以Angular 5打开的窗口打开

2 个答案: