web-dev-qa-db-fra.com

Comment ouvrir un composant Angular dans un nouvel onglet?

J'ai une quantité considérable de données à afficher à l'écran. Je dois présenter une liste simplifiée afin que l'utilisateur puisse choisir l'un des éléments et voir ses détails.

Imaginez donc que j'ai un composant SimpleListComponent, il contiendra les données et présentera une vue simplifiée

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

Le html

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

L'utilisateur doit pouvoir cliquer sur l'un des itens et ouvrir dans un nouvel onglet une vue avec les détails de cet élément. Donc, si j'ai un deuxième composant

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

Edit: Le hic ici est que je présente les données d'une recherche très personnalisée, donc je n'ai pas d'ID pour obtenir les détails du serveur ou de toute autre manière pour obtenir à nouveau les données. La seule façon est donc de transmettre les données déjà chargées.

Comment puis-je y parvenir en angulaire? Donner les données de l'élément au deuxième composant et l'ouvrir dans un nouvel onglet?

angulartypescriptangular2-components
3
Rohling

Dans le cas où quelqu'un rencontre le même problème que j'ai rencontré:

J'ai fini d'utiliser localstorage pour stocker temporairement mon objet et y accéder depuis l'autre fenêtre.

Donc, le code a fini comme:

<a target="_blank" [routerLink]="['/details', item.name]" click="passObject(item.name)">
passObject(i){
    localStorage.setItem('i.name', JSON.stringify(i));
}

Et dans le volet détails:

ngOnInit() {
    this.item = JSON.parse(localStorage.getItem(param));
}

Une autre idée que je pourrais essayer est d'implémenter un service de messagerie

0
Rohling

Vous pouvez créer un routage pour DetailViewComponent et ""

Dans votre routage:

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

Et après cela sur TypeScript de SimpleListComponent:

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

Sur votre Html de SimpleListComponent:

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

Sur TypeStript de DetailViewComponent:

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
}
2
Alex Hora

Je vous suggère de le faire à partir de HTML en utilisant l'attribut cible:

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

Dans cet exemple, "/ item /: nom" doit être défini dans votre module de routage.

0
Kjell Gladiné