Angular 如何在新选项卡中打开角度组件？

我有大量的数据要显示在屏幕上。我需要提供一个简化的列表，以便用户可以选择其中一个项目并查看其详细信息

假设我有一个组件SimpleListComponent，它将保存数据并显示一个简化的视图

export class SimpleListComponent{
    @Input() data: any[];
}

html

<ul>
    <li *ngFor="let item of data">
        <a>{{item.name}}</a>
    </li>
</ul>

{{item.name}

用户应该能够单击其中一个iTen，并在新选项卡中打开该项目详细信息的视图。 如果我有第二个组件

export class DetailedViewComponent{
    @Input() item: any;
}
<div>
    <!--All fields of item here-->
</div>

导出类DetailedViewComponent{
@输入（）项：任意；
}

编辑：这里的问题是，我展示的数据来自一个非常定制的搜索，因此我没有ID从服务器获取详细信息，也没有任何其他方式再次获取数据。因此，唯一的方法是，以某种方式传递已经加载的数据

---

我怎样才能做到这一点呢？将项目数据提供给第二个组件，并在新选项卡中打开它？

我建议您使用目标属性从HTML执行此操作：

---

在此示例中，应在路由模块中定义“/item/：name”。

您可以为DetailedViewComponent和“”创建路由

在您的路线中：

{
    path: 'detailed/:id',
    component: DetailedViewComponent
}

然后在SimpleListComponent的typeScript上：

public detailedPath;
ngOnInit() {
     this.detailedPath = window.location.origin + '/detailed/';
}

<ul>
   <li *ngFor="let item of data">
      <a href="{{detailedPath + item.id}}" target="_blank">
   </li>
</ul>

public id;
constructor(private routeParams: ActivatedRoute) {
}

ngOnInit() {
    this.routeParams.params.subscribe(params => {
      this.id = parseInt(params['id']);
    });
    //Some logic to get the details of this id
}

在SimpleListComponent的Html上：

public detailedPath;
ngOnInit() {
     this.detailedPath = window.location.origin + '/detailed/';
}

<ul>
   <li *ngFor="let item of data">
      <a href="{{detailedPath + item.id}}" target="_blank">
   </li>
</ul>

public id;
constructor(private routeParams: ActivatedRoute) {
}

ngOnInit() {
    this.routeParams.params.subscribe(params => {
      this.id = parseInt(params['id']);
    });
    //Some logic to get the details of this id
}

---

如果有人遇到与我相同的问题：

我结束了使用临时存储我的对象并从另一个窗口访问它

所以代码的结尾是：

<a target="_blank" [routerLink]="['/details', item.name]" click="passObject(item.name)">
passObject(i){
    localStorage.setItem('i.name', JSON.stringify(i));
}

---

我可以尝试的另一个想法是实现一个

我知道这是一篇老文章，但因为这是搜索“如何在新选项卡/窗口中打开角度组件”时的第一个结果，所以我想发布一个答案

如果您为组件创建路由并在新选项卡中加载路由，则最终将再次引导应用程序

因此，如果你想在不引导整个应用程序的情况下打开一个angular组件，你可以使用angular门户。您还可以轻松地在父窗口和子窗口之间传递数据

我最近有这个要求，我找不到任何关于这个的综合资源，所以我写了一篇关于它的文章

下面是示例应用程序的实时演示

---

target=“blank”在link或whateverEx:window.open（“/login”，“u blank”）上，以防您想从中打开。t您是指新的浏览器选项卡，还是网页中的某种新HTML选项卡？当然，在同一个Angle应用程序上打开两个浏览器选项卡是可能的，但如果您需要它们相互交互，这会增加很多复杂性-因此最好在页面中引入某种虚拟选项卡。@MarkHughes感谢评论人。因此，这将是浏览器中的一个新选项卡，但我不需要绑定数据或涉及选项卡之间交互的任何内容。这只是为了在一个更清晰的视图中显示数据。我想我可以通过target=“\u blank”实现这一点，但我不确定如何将我的项目传递给新组件。你不能像这样轻松地在浏览器选项卡之间传递内容。有一些方法可以做到这一点，但我认为它们大多是黑客。。。因此，您的新选项卡需要从服务器加载所需的数据。如果页面中有一个“虚拟选项卡”，则可以传递完整的对象，而交叉选项卡部分会使传递变得更加困难。我看到/detail会传递到我的DetailedViewComponent，但我需要传递整个项目，而不仅仅是名称。对不起，如果我误解了你的问题，你将走另一条路线。在此页面上，您可以使用解析器执行HTTP GET并获取请求的信息。示例：Alligator.io如果仍然不清楚，请告诉我，我将创建一个示例。现在很清楚，您的答案有意义，是我的问题不清楚。使用此方法的任何人都请注意，浏览器对可以存储在本地存储中的对象的长度有限制。OP说他们有相当多的数据要显示，所以我不认为这是一个正确的解决方案。第二个消息服务的示例也不起作用，因为该服务没有在选项卡之间共享。如果有效，则应将答案标记为正确答案。如果用户希望通过提供此url直接在浏览器中导航到，会发生什么情况？popout.html是一个空白html页面。如果直接转到该html，它将为空。这仅适用于您已经加载angular应用程序，并且您希望通过单击链接或按钮而不是直接更改url来打开子浏览器选项卡中的另一个组件的情况。因此，无法直接导航？我喜欢您的想法。我在一个项目中有这个要求。我唯一不喜欢的是每次我想在新窗口中打开一个新组件时需要改变多少。我做了一些更改，使服务更通用，这样就可以弹出任何条目组件，而无需对服务或令牌进行修改（弹出模式枚举除外，但只有在您愿意的情况下）。下面是链接：您能解释一下为什么DetailedViewComponent会在新选项卡中打开吗？在您的代码示例中，这到底意味着什么？这是否适用于具有DetailedViewComponent的延迟加载模块？