Question

我有三个用户，当我点击下一步时它必须为下一个用户加载路由，所以我正在添加一个到id并传递给routerLink，不管怎么说而不是添加它是连接数字，下面是代码< / p>

import { Component, OnInit, OnDestroy } from '@angular/core';
import { ActivatedRoute,Params } from '@angular/router';
import { Subscription } from 'rxjs/Subscription';
@Component({
  selector: 'app-user',
  templateUrl: './user.component.html',
  styleUrls: ['./user.component.css']
})
export class UserComponent implements OnInit,OnDestroy {
  routeSubscription : Subscription;
  id : number;
  next :  number = 0;
  constructor(private route:ActivatedRoute) { 
  }

  ngOnInit() {
  this.routeSubscription =  this.route.params.subscribe((params :Params) =>{
    this.id = params['id'];
    this.next = this.id  + 1;
  });
  }
  ngOnDestroy(){
    this.routeSubscription.unsubscribe();
  }
}

此

的Html模板

<p>
  user id : {{ id }}
</p>

<button class="btn btn-primary" [routerLink] = "['/Users', next ]">Next</button>

请让我知道为什么接下来会与id

连接

Answer 1

问题是params中this.id = params['id'];对象返回的id值是一个字符串值。

以下内容应解决您的问题

this.next = +this.id  + 1; // The id is cast to a number with the unary + operator

Answer 2

问题可能是this.id = params [＆＃39; id＆＃39;]正在设置一个字符串到this.id，然后＆＃39; this.id + 1;＆＃39;与＆＃34;＆＃39; 1＆＃39;相同+ 1＆＃34 ;;

尝试将其解析为整数

this.id = parseInt(params['id'], 10);

Answer 3

TypeScript仅在编译时进行类型检查，这是失败的示例之一。问题是Params是defined like this：

export type Params = {
  [key: string]: any
};

这意味着params['id']的类型为any，因此可分配给number类型的字段，即使它在运行时实际上是string。

因此，正如其他人已经指出的那样，你必须在分配之前解析该字段：

this.id = parseInt(params['id'])

Angular打字稿连接数字而不是添加

3 个答案: