Question

我需要将当前的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}}

我认为我在某处做错了吗？

Answer 1

在模板中时，变量会自动从基础组件中获取。因此，您无需放置this来访问成员变量。

在您的代码中，您只需要userId而不是this.userId，即可得到：

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

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

Answer 2

请尝试以下操作：

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

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

如何在[routerlink]内部传递变量

2 个答案: