Передача невидимых или скрытых параметров с помощью routerLink Angular

Ответ 1

Я не уверен, если есть способ сделать это, потому что данные должны быть представлены в строке 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;
    }
}

Ответ 2

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

Попробуйте использовать свойство skipLocationChange.

Ответ 3

@AddWeb @SailiUnique

Ваше решение работает, но вам не нужно помещать свойство в [routLink]. Правильное место находится вне его, как любая собственность.

Как это:

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

Ответ 4

Ответ не совсем эффективен, потому что 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 (текущий маршрут)

Вы можете создать службу данных или проверить официальные документы углового маршрутизатора

Ответ 5

в Angular 7 вы можете использовать состояние History для передачи динамических данных в компонент, к которому вы хотите перейти, без добавления их в URL, например:

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

или же

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

и вы можете получить это таким образом

const navigation = this.router.getCurrentNavigation();
this.orderId = navigation.extras.state ? navigation.extras.state.orderId : 0;