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

Question

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

所以想象我有一个组件 SimpleListComponent，它将保存数据并呈现一个简化的视图

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

html

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

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

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

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

我怎样才能在角度上实现这一目标？将项目数据提供给第二个组件并在新选项卡中打开它？

Answer 1

我知道这是一篇旧帖子，但由于这是您搜索“如何在新选项卡/窗口中打开角度组件”时的第一个结果，我想发布一个答案。

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

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

我最近有这个需求，我找不到任何关于这方面的综合资源，所以我整理了一篇关于它的文章。

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

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

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

所以代码最终是这样的：

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

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