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

Question

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

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

The 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 tab a 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.

How can I achieve that in angular? Give the item data to the second component and open it in a new tab?

Answer 1

I know this is an old post but since this is the first result when you search “how to open angular component in new tab/window” I wanted to post an answer.

If you create a route for the component and load the route in a new tab you will end up bootstrapping the app again.

So if you want to open an angular component without bootstrapping the whole app you can do it using angular portals. You can also easily pass data between the parent and the child window.

I recently has this requirement and I couldn't find any comprehensive resource on this so I put together an article on it.

https://medium.com/@saranya.thangaraj/open-angular-component-in-a-new-tab-without-bootstrapping-the-whole-app-again-e329af460e92?sk=21f3dd2f025657985b88d6c5134badfc

Here is a live demo of the example app

https://stackblitz.com/edit/portal-simple

Answer 2

You can create a routing for DetailedViewComponent and ""

In your routing:

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

And after that On typeScript of SimpleListComponent:

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

On your Html of SimpleListComponent:

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

On TypeStript of DetailedViewComponent:

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

In case someone runs into the same issue I ran:

I ended using localstorage to temporarily store my object and access it from the other window.

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

Answer 4

I would suggest you do it from HTML by using the target attribute:

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

In this example "/item/:name" should be defined in your routing module.