如何在[routerlink]内传递变量

Posted 2023-01-28

我需要将当前的userId传递到routerlink的borrow_list component

我在userId宣布borrow_list component的方式

userId: number;
constructor(private authService: AuthService, private bookService: BookService,
     private route: ActivatedRoute, private alertify: AlertifyService)  



ngOnInit() 
    this.userId = this.authService.decodedToken.nameid;
    this.route.data.subscribe(data => 
      this.books = data['books'].result;
      this.pagination = data['books'].pagination;
    );
    this.borrowParam = 'loan';
    console.log(this.userId); // this one return 26
  

然后我尝试使用userId将routerlink传递给另一个组件

<div class="row">
  <div *ngFor="let b of books" class="col-sm-6 col-md-4 col-lg-4 col-xl-2">
    <app-book-card [book]="b"></app-book-card>
    <button class="btn btn-primary" [routerLink]=" 
     ['/browse/book/',this.userId,'/content/', b.id]" style="width: 75px">Read 
    </button>
  </div>
</div>

但它似乎不起作用，没有错误，但它将我引回主页

当我试图硬编码链接，它按预期工作，即

[routerLink]="['/browse/book/26/content/', b.id]"

我的routes.ts

path: 'browse/book/:id/content/:bookId', component: Book_contentComponent, resolve: book: BookContentResolver

我想我在某个地方做错了？

答案

在模板中时，变量会自动从基础组件中获取。所以你不需要使用this来访问成员变量。

在你的代码中，你只需要userId而不是this.userId，给出：

<button class="btn btn-primary" [routerLink]=" 
 ['/browse/book/', userId,'/content/', b.id]" style="width: 75px">Read 
</button>

注意：将style内联到html中并不是一个好习惯。

另一答案

请试试这个：

<button class="btn btn-primary" [routerLink]=" ['browse', 'book', userId, 'content', 
b.id]" style="width: 75px">Read </button>

每个路径段都是数组中的一个元素。