Как открыть угловой компонент в новой вкладке? - PullRequest
Новая
       12

Как открыть угловой компонент в новой вкладке?

0 голосов
/ 24 августа 2018

У меня есть значительный объем данных для отображения на экране. Мне нужно представить упрощенный список, чтобы пользователь мог выбрать один из пунктов и увидеть его детали.

Итак, представьте, что у меня есть компонент SimpleListComponent, он будет хранить данные и представлять упрощенное представление 

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

HTML 

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

Пользователь должен иметь возможность щелкнуть по одному из итенов и открыть на новой вкладке представление с подробностями этого элемента. Так что, если у меня есть второй компонент 

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

Редактировать: уловка в том, что я представляю данные из очень персонализированного поиска, поэтому у меня нет идентификатора, чтобы получить подробности с сервера или каким-либо другим способом получить данные снова. Таким образом, единственный способ - каким-то образом передать уже загруженные данные.

Как я могу добиться этого в угловых? Передать данные элемента второму компоненту и открыть его на новой вкладке?

Ответы [ 3 ]

0 голосов
/ 24 августа 2018

Вы можете создать маршрутизацию для DetailViewComponent и ""

В вашей маршрутизации: 

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

И после этого On typeScript SimpleListComponent: 

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

OnВаш HTML-код SimpleListComponent: 

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

На TypeStript для 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
}
0 голосов
/ 28 августа 2018

В случае, если кто-то столкнулся с той же проблемой, я запустил:

Я прекратил использовать 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));
}

Еще одна идея, которую я мог бы попробовать, - это реализация службы сообщений

0 голосов
/ 24 августа 2018

Я бы посоветовал вам сделать это из HTML, используя атрибут target:

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

В этом примере в вашем модуле маршрутизации должно быть определено «/ item /: name».

...