如何在新标签页中打开 Angular 组件？

Question

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

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

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

html

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

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

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

编辑：这里要注意的是，我提供的数据来自非常定制的搜索，所以我没有 ID 无法从服务器获取详细信息，也没有任何其他方式可以再次获取数据。所以唯一的方法就是以某种方式传递已经加载的数据。

如何在 angular 中实现这一点？把物品数据给第二个组件，在新标签页打开？

Answer 1

我建议您使用目标属性从 HTML 开始：

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

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

Answer 2

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

在您的路由中：

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

然后在 SimpleListComponent 的 typeScript 上：

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

在您的 Html SimpleListComponent 上：

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

在 DetailedViewComponent 的 TypeStrip 上：

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

如果有人遇到同样的问题，我运行:

我不再使用 localstorage 临时存储我的对象并从另一个 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));
}

我可以尝试的另一个想法是实施 message service

Answer 4

我知道这是旧的 post 但因为这是搜索“如何在新的 tab/window 中打开 angular 组件”时的第一个结果，所以我想 post一个答案。

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

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

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

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

如何在新标签页中打开 Angular 组件？

How to open a Angular component in a new tab?

typescript

angular2-components

angular