web-dev-qa-db-ja.com

Angularコンポーネントを新しいタブで開く方法は？

画面に表示するデータがかなりあります。ユーザーがアイテムの1つを選択して詳細を確認できるように、簡略化したリストを提示する必要があります。

したがって、コンポーネントSimpleListComponentがあるとします。これは、データを保持し、簡略化されたビューを表示します

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

Html

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

ユーザーはitensの1つをクリックして、新しいタブで開くそのアイテムの詳細を含むビューを表示できる必要があります。したがって、2番目のコンポーネントがある場合

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

編集：ここでの問題は、非常にカスタマイズされた検索からのデータを提示しているため、サーバーから詳細を取得するためのIDがないか、データを再度取得する他の方法がないことです。したがって、唯一の方法は、何らかの方法で、すでにロードされているデータを渡すことです。

どうすれば角度でそれを達成できますか？アイテムデータを2番目のコンポーネントに渡して、新しいタブで開きますか？

angulartypescriptangular2-components
3
Rohling

誰かが同じ問題に遭遇した場合、私が実行しました：

私は 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
Rohling

DetailedViewComponentおよび ""のルーティングを作成できます

あなたのルーティングで：

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

その後、SimpleListComponentの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
}
2
Alex Hora

Target属性を使用して、HTMLから行うことをお勧めします。

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

この例では、「/ item /：name」をルーティングモジュールで定義する必要があります。

0
Kjell Gladiné