使用routerLink Angular传递不可见或隐藏的参数

Question

我有如下路由器链接:

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

我想传递参数showTour.但是,当我这样做时,参数是可见的url,我想隐藏它.我已经经历了这么多的引用(关于可选参数的说法),但在我的案例中没有成功.我该怎么解决这个问题？

Answer 1

使用状态传递隐藏参数和历史记录以读取它们。

第一个组件：

this.router.navigate(
      [`/dashboard/roles/${id}`],
      { state: { navSettings: navSettings } });

第二个组成部分：

public ngOnInit(): void {
    const id = this.activatedRoute.snapshot.params.id;
    this.initNavSettings(history.state.navSettings);
}

Answer 2

我不确定,是否有办法,因为数据需要在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;
    }
}

Answer 3

在Angular 7中，您可以使用“ 历史记录”状态将动态数据传递到要导航到的组件，而无需将其添加到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;

Answer 4

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

尝试使用skipLocationChange属性。