如何在新标签页中打开Angular组件? [英] How to open a Angular component in a new tab?

问题描述

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

I have a considerable amount of data to show on the screen. I need to present a simplified list so the user can choose one of the items and see it's details.

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

So imagine I have a component SimpleListComponent, it will hold the data and present a simplified view

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

html

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

用户应该能够单击其中一个项目，并在新标签页中打开，其中包含该项目的详细信息. 所以如果我有第二个组件

The user should be able to click on one of the itens and open in a new tab a view with that item's details. So if I have a second Component

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

这里的要点是我正在从非常定制的搜索中显示数据，因此我没有ID可以从服务器获取详细信息，也没有其他方式可以再次获取数据.因此，唯一的方法是以某种方式传递已经加载的数据.

The catch here is that I'm presenting data from a very customized search, so I don't have a ID to get the details from the server or any other way to get the data again. So the only way is to, somehow, pass the data that is already loaded.

我如何才能做到这一点?将项目数据提供给第二个组件，然后在新选项卡中将其打开?

How can I achieve that in angular? Give the item data to the second component and open it in a new tab?

推荐答案

万一有人遇到我遇到的同一问题，

In case someone runs into the same issue I ran:

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

I ended using localstorage to temporarily store my object and access it from the other window.

所以代码最终像这样:

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

我可以尝试的另一个想法是实现消息服务

Another idea that I could try is implementing a message service

这篇关于如何在新标签页中打开Angular组件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！