typescript 如何在新选项卡中打开 Angular 组件？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/52005119/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to open a Angular component in a new tab?
提问by Rohling
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.
我有大量数据要显示在屏幕上。我需要提供一个简化的列表，以便用户可以选择其中一个项目并查看其详细信息。
So imagine I have a component SimpleListComponent, it will hold the data and present a simplified view
所以想象我有一个组件 SimpleListComponent，它将保存数据并呈现一个简化的视图
export class SimpleListComponent{
@Input() data: any[];
}
The html
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 taba 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>
Edit: 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.
编辑：这里的问题是我从一个非常定制的搜索中呈现数据，所以我没有一个 ID 来从服务器或任何其他方式再次获取数据的详细信息。所以唯一的方法就是以某种方式传递已经加载的数据。
How can I achieve that in angular? Give the item data to the second component and open it in a new tab?
我怎样才能以角度实现这一目标？将项目数据提供给第二个组件并在新选项卡中打开它？
采纳答案by Rohling
In case someone runs into the same issue I ran:
如果有人遇到同样的问题，我跑了：
I ended using localstorageto temporarily store my object and access it from the other window.
我结束了使用localstorage来临时存储我的对象并从另一个窗口访问它。
So the code ended up like:
所以代码最终如下：
<a target="_blank" [routerLink]="['/details', item.name]" click="passObject(item.name)">
passObject(i){
localStorage.setItem('i.name', JSON.stringify(i));
}
And in the details component:
在详细信息组件中：
ngOnInit() {
this.item = JSON.parse(localStorage.getItem(param));
}
Another idea that I could try is implementing a message service
我可以尝试的另一个想法是实现消息服务
回答by Alex Hora
You can create a routing for DetailedViewComponent and ""
你可以为DetailedViewComponent和""创建路由
In your routing:
在您的路由中：
{
path: 'detailed/:id',
component: DetailedViewComponent
}
And after that On typeScript of SimpleListComponent:
然后在 SimpleListComponent 的 typeScript 上：
public detailedPath;
ngOnInit() {
this.detailedPath = window.location.origin + '/detailed/';
}
On your Html of SimpleListComponent:
在 SimpleListComponent 的 Html 上：
<ul>
<li *ngFor="let item of data">
<a href="{{detailedPath + item.id}}" target="_blank">
</li>
</ul>
On TypeStript of DetailedViewComponent:
在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
}
回答by Kjell Gladiné
I would suggest you do it from HTML by using the target attribute :
我建议您使用目标属性从 HTML 中执行此操作：
<a target="_blank" [routerLink]="['/detail',item.name]">
<a target="_blank" [routerLink]="['/detail',item.name]">
In this example "/item/:name" should be defined in your routing module.
在这个例子中，“/item/:name”应该在你的路由模块中定义。
