web-dev-qa-db-ja.com

routerLink Angularを使用して、非表示または非表示のパラメーターを渡します

次のようなルーターリンクがあります。

<button class="take-a-tour-btn" [routerLink]="['/dashboard', {'showTour':'show'}]">

パラメーターshowTourを渡したいです。しかし、これを行うと、パラメーターはurlに表示されるので、非表示にしたいと思います。私は非常に多くの参照（オプションのパラメーターについて述べています）を経験しましたが、私の場合は成功しませんでした。どうすればこれを解決できますか？

angularrouterrouteparams
16
SaiUnique

データをURL文字列で提示する必要があるため、それを行う方法があるかどうかはわかりません。

私の提案は、必要なデータを保存するグローバルサービスを使用することです。例えば：

//some dataService, which store your needed data.
@Injectable()
export class DataService {

   _showTour: string;

   set showTour(value: string) {
      this._showTour = value;
   }

   get showTour(): string {
       return this._showTour;
   }

   constructor() {}

}

ナビゲーションコンポーネントで次のように使用します。

//your navigation component
@Component({
    selector: 'my-app',
    template: `
       <button class="take-a-tour-btn" (click)="onClick()">
    `
})
export class SomeComponent {
    constructor(private dataService: DataService, private router: Router) { }

    onClick() {
        this.dataService.showTour = 'show';
        this.router.navigate(['/dashboard']);
    }
}

ダッシュボードコンポーネントで同じサービスを使用し、必要な価値を得ることができます。この方法では：

//your dashboard component
@Component({
    selector: 'my-dashboard',
    template: `
       <h1>{{ showTour }}</h1>
    `
})
export class DashboardComponent implements OnInit {

    showTour: string;

    constructor(private dataService: DataService) { }

    ngOnInit() {
        this.showTour = this.dataService.showTour;
    }
}
10
Jaroslaw K.

in Angular 7を使用してHistory stateを使用すると、動的データをURLに追加せずに、ナビゲート先のコンポーネントに渡すことができます。

this.router.navigateByUrl('/user', { state: { orderId: 1234 } });

または

<a [routerLink]="/user" [state]="{ orderId: 1234 }">Go to user's detail</a>

この方法で入手できます

const navigation = this.router.getCurrentNavigation();
this.orderId = navigation.extras.state ? navigation.extras.state.orderId : 0;
4
Fateh Mohamed
<button class="take-a-tour-btn" [routerLink]="['/dashboard', {'showTour':'show', skipLocationChange: true}]">

SkipLocationChangeプロパティを使用してみてください。

4
AddWeb Solution Pvt Ltd

@AddWeb @SailiUnique

ソリューションは機能しますが、プロパティを[routLink]に配置する必要はありません。正しい場所は、プロパティとしてその外側にあります。

このような：

<div class="row inline rowItem" [routerLink]="['/businessPartnerDetails']" [queryParams]="{ id: bpItem.id, bp: bpItem.companyName}" skipLocationChange=true (click)="onViewDetails(bpItem)">

0
Simona-Mihaela Luca

SkipLocationChangeはブラウザーのURLの現在のルートを変更せず、後で戻る場合は最初のルートから戻ったため、応答は正確に効率的ではありません。

たとえば、ホームページにいて、これを使用する場合：

<button class="take-a-tour-btn" [routerLink]="['/dashboard', {'showTour':'show', skipLocationChange: true}]">Go to dashboard</button>

dashboardからhomeに戻したい場合は、オブジェクトlocationではできません。この場合、Routerを使用して指定する必要があります正確なルート（/dashboard）。

しかし、これは多くの場合これは悪い解決策であり、ブラウザのルーティングは/homeからdashboardへ。

不都合：

  • ブラウザが正しいURLに更新されない
  • dashboard（現在のルート）から戻ることはできません

データサービスを作成するか、公式の angular router docs を確認できます。

0
duprez