Question

我有一个翻页的按钮。我需要保留在该组件中，更改地址栏中的ID，因此将更改该站点上的信息。数据传给我，看起来像这样：

{
 "users": [
  {
   "id": "3135",
   "name": "Lulu"
  },
 {
  "id": "8173",
  "name": "Lala"
 },
 {
  "id": "5783",
  "name": "Lolo"
 }
]

我正在通过获取ID输出有关用户的详细信息。我的导航看起来像：

{ path: 'list', component: ListComponent },
{ path: '', redirectTo: '/list ', pathMatch: 'full' },
{ path: 'details/:id', component: DetailComponent }

我有一个按钮，通过按下该按钮可以从'/ details / Id'过渡到'details / nextId'。但是此按钮不起作用。这是对服务中下一个ID的请求。（我从数据库API获取数据）

private users: User[] = new Array<User>();
private locator = (u: User, id: number) => u.id === id;
getNextId(id: number): number {
 let index = this.users.findIndex(u => this.locator(u, id));
 if (index > -1) {
  return this.users[this.users.length > index + 2
   ? index + 1 : 0].id;
 } else {
  return id || 0;
 }}

HTML：

<button class="next-user" [routerLink]="['details', userService.getNextId(user.id)]" routerLinkActive="active">
    Next User
  </button>

DetailsListComponent：

 private userService: UserService,
private activeRoute: ActivatedRoute,
private location: Location,
private router: Router) {

activeRoute.params.subscribe(params => {
  this.detail = params['details'] === 'details';
  let id = params['id'];
  if (id !== null) {
    Object.assign(this.user, userService.getNextId(id));
  }
});
}
detail: boolean = true;

我在Internet上搜索了该问题的答案，但发现仅适用于php。请帮我。我究竟做错了什么？我最近才开始学习角度7，但并不总是知道该怎么做。

我不知道如何正确解释它，如何解释我的问题。但我会尝试，我有一个页面显示我的用户列表。单击用户将打开一个新页面，其中包含有关该页面的更多详细信息。为了不返回带有用户列表的页面并且不选择下一个用户，带有有关用户的详细信息的页面假定存在“下一步”按钮。当我单击此按钮时，将迭代该数组，它由页面当前打开的ID和该数组中的下一个ID决定，此后页面将转到下一个ID。即，打开了同一页面，但是关于该页面的信息是关于另一个用户的，该用户在前一个用户之后跟随该列表。但是我的按钮目前无法使用，我也不明白为什么。

Answer 1

我不清楚您到底要面对什么问题，但是这里概述了如何通过单击按钮路由到下一个用户ID。

// in Component.ts file
// import Router from @angular/router
import { Router } from '@angular/router';


constructor(private _router: Router){}

// to get the next user id
getNextId(id: number): number {
       
       // write your logic to get the next id here 
    
 }}
 
//navigate to user id 
getNextUser(id:number){

let nextId  = this.getNextId(id); // holds next id 

this._router.navigate([`/register-step2/${nextId}`]);

}

<!-- In Component.html  -->
<div class="userDetails">
 <p> {{user.name}} </p>
  <p> {{user.age}} </p>
   <p> {{user.occuption}} </p>
</div>
<button class="next-user" (click)="getNextUser(user.id)">
    Next Movie
  </button>

我假设对于每个userid服务都会被调用，并且服务的结果存储在user变量中。希望对您有所帮助。

Answer 2

===编辑（在问题明确之后）===

现在，我了解了您的用例。这就是我要怎么做。

没有什么要注意的，因此示例很清楚：

list路线已重命名为users（对我来说更有意义）
创建了全新的UsersComponent以处理所有与用户相关的路由
DetailComponent-> UserDetailsComponent
ListComponent-> UsersListComponent

这些只是我的编码约定，所以事情很清楚。您可以保留您的命名方式。

在您的根组件中，您将拥有根<router-outlet>。并且在<router-outlet>中还将有另一个UsersComponent。在路由器设置中，您将：

{ path: 'users', component: UsersComponent, children: [
  { path: '', component: UsersListComponent }
  { path: ':id', component: UserDetailsComponent }
] },
{ path: '', redirectTo: '/users ', pathMatch: 'full' }

注意，我添加了一个新组件UsersComponent，它将成为UsersListComponent和UserDetailsComponent的父组件。它将保留一个<router-outlet>，该UsersListComponent或UserDetailsComponent会根据活动的子路由而保留。

对于/users，它将呈现UsersListComponent。
对于/users/:id，它将呈现UserDetailsComponent。

因此，UsersListComponent将具有类似于以下模板的内容：

<div *ngFor="let user of users" class="user-list-item" >
    <p>user.name</p>
    <button class="open-user-details"
            [routerLink]="['/users', user.id]">
      Navigate To Details
    </button>
</div>

在UserDetailsComponent中，您将看到以下内容：

<div class="userDetails">
  <p> {{user.id}} </p>
  <p> {{user.name}} </p>
  <p> {{user.age}} </p>
  <p> {{user.occuption}} </p>
</div>

<button class="next-user" 
        [routerLink]="['/users', getNextUserId()]" 
        routerLinkActive="active">
    Next User
</button>

在.ts的{{1}}文件中，您将拥有：

UserDetailsComponent

我假设您的user: User; // complete user details object. ID included constructor(private userService: UserService, private activeRoute: ActivatedRoute) // gets the next user id based on the current user.id public getNextUserId(): number { return this.userService.getNextId(this.user.id) } public ngOnInit(): void { this.activeRoute.params.pipe(switchMap((params) => { return this.userService.getUserById(params.id); })).subscribe(user => { this.user = user; }); }具有单独的方法：

UserService
getNextId(curId: number): number

分页时如何从数组中获取下一个ID？

2 个答案: