Question

我有一个角度应用程序，我想在每个浏览器选项卡中显示不同的页面。我希望每个页面只能有一个打开的选项卡。例如，如果用户单击以打开一个页面，并且该页面已经在选项卡中打开，则它应该导航到已经存在的选项卡，否则打开一个新的选项卡。我使用localStorage可以正常工作。所有页面都是从主页触发的，这是我的工作方式：

在我的主页组件中，每次打开新页面时都会调用以下方法（注意：我使用env变量来区分用户何时针对不同的env打开了不同的应用页面）

loadGrid(gridId : string)
  {

    let tabName = localStorage.getItem(this.gridEnv+'-'+gridId);
    if(tabName)
    {
      window.open("", tabName).focus;
    }
    else
    {
     let url = "dataGrid/"+gridId;
     localStorage.setItem(this.gridEnv+'-'+gridId, url);
     window.open(url, url).focus();
    }
  }

它基本上会检查我是否将此页存储在LocalStorage中（如果是），然后转到它，否则创建一个新选项卡，然后将其存储在LocalStorage中。当我打开首页并打开一个标签页后，我的本地存储就会变成这样

Storage {local-Home: "hometab", local-1: "dataGrid/1", length: 2}

Local-Home用于主页，因此，如果任何打开的页面都想导航到主页，这会将它们带到已经打开的主页选项卡上

local-1是打开的页面之一，如果用户尝试打开同一页面，则会将其带到已经打开的选项卡上。

这很好用。

现在出现问题，如果用户决定在其他选项卡中打开另一个主页（另一个http://localhost:4200）并尝试打开从上一个主页已经打开的页面之一，我得到空白页面。甚至认为它会检查选项卡名称是否已在本地存储中。

localstorage是否关心父页面？我的理解是window.open（“”，tabName）应该带我到选项卡，而不管它是从哪个父级启动的，不是这样吗？当我打开一个新主页时，如果另一个主页已经打开，则不会更新LocalStorage。每次打开新主页都应该清除LocalStorage吗？如果我这样做，其他打开的标签页会怎样？

Answer 1

您希望每个页面只能有一个打开的选项卡。那么您可以直接使用导航功能

navigate(['your-localstoarge-navigating-component'])

window.open（“”，tabName）返回有关：本地存储中带有标签名称的空白

1 个答案: