我有大量的数据要在屏幕上显示。我需要提供一个简化的列表，以便用户可以选择其中一个项目并查看其详细信息。
所以假设我有一个组件SimpleListComponent，它将保存数据并呈现一个简化的视图
export class SimpleListComponent{
@Input() data: any[];
}
目录
<ul>
<li *ngFor="let item of data">
<a>{{item.name}}</a>
</li>
</ul>
用户应该能够单击其中一个 itens，并在新选项卡中打开包含该项目详细信息的视图。 所以如果我有第二个组件
export class DetailedViewComponent{
@Input() item: any;
}
<div>
<!--All fields of item here-->
</div>
编辑：这里的问题是我正在呈现来自非常自定义搜索的数据，所以我没有ID从服务器获取详细信息或任何其他方式再次获取数据。因此，唯一的方法是以某种方式传递已加载的数据。
我怎样才能在角度中实现这一点？将项目数据提供给第二个组件并在新选项卡中打开它？
我知道这是一个旧帖子，但由于这是您搜索"如何在新选项卡/窗口中打开角度组件"时的第一个结果，我想发布一个答案。
如果为组件创建路由并在新选项卡中加载路由，则最终将再次引导应用程序。
因此，如果您想在不引导整个应用程序的情况下打开一个角度组件，您可以使用角度门户来完成。您还可以轻松地在父窗口和子窗口之间传递数据。
我最近有这个要求，我找不到任何关于此的全面资源，所以我整理了一篇关于它的文章。
https://medium.com/@saranya.thangaraj/open-angular-component-in-a-new-tab-without-bootstrapping-the-whole-app-again-e329af460e92?sk=21f3dd2f025657985b88d6c5134badfc
下面是示例应用的现场演示
https://stackblitz.com/edit/portal-simple
您可以为 DetailedViewComponent 和 " 创建路由
在您的路由中：
{
path: 'detailed/:id',
component: DetailedViewComponent
}
之后，在 SimpleListComponent 的 typeScript 上：
public detailedPath;
ngOnInit() {
this.detailedPath = window.location.origin + '/detailed/';
}
在 SimpleListComponent 的 HTML 上：
<ul>
<li *ngFor="let item of data">
<a href="{{detailedPath + item.id}}" target="_blank">
</li>
</ul>
在 DetailedViewComponent 的 TypeStript 上：
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));
}
在详细信息组件中：
ngOnInit() {
this.item = JSON.parse(localStorage.getItem(param));
}
我可以尝试的另一个想法是实现消息服务
我建议您使用目标属性从HTML中执行此操作：
<a target="_blank" [routerLink]="['/detail',item.name]">
在此示例中，应在路由模块中定义"/item/：name"。