Question

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

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

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

html

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

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

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

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

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

Answer 1

我知道这是一篇旧文章，但是由于这是当您搜索“如何在新标签页/窗口中打开角度分量”时的第一个结果，因此我想发布一个答案。

如果为组件创建路由并将该路由加载到新选项卡中，则最终将重新引导应用程序。

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

我最近有此要求，因此我找不到任何全面的资源，因此我在上面撰写了一篇文章。

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

Answer 2

您可以为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
}

Answer 3

我建议您通过使用target属性从HTML进行操作：

<a target="_blank" [routerLink]="['/detail',item.name]">

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

Answer 4

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

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

所以代码最终像这样：

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

我可以尝试的另一种想法是实现message service

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

4 个答案: