如何在新标签页中打开Angular组件？-Java 学习之路

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

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

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

HTML

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

用户应该可以单击其中一个itens并使用该项目的详细信息查看 open in a new tab 视图 . 所以，如果我有第二个组件

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

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

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

3 回答

0

我建议您使用target属性从HTML中执行此操作：

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

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

回复于 2024-04-29T10:53:40+08:00

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

在您的路由中：

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

然后在SimpleListComponent的On 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
}

回复于 2024-04-29T10:53:40+08:00

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

我结束使用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
回复于 2024-04-29T10:53:40+08:00

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

3 回答

相关问题