Получить следующие данные по активированному маршруту - PullRequest
Новая
       5

Получить следующие данные по активированному маршруту

0 голосов
/ 12 ноября 2018

У меня есть два компонента TodosComponent и TodoDetailsComponent. Нажатие на элемент в TodosComponent переводит меня на TodoDetailsComponent, а в компоненте ngOnInit захватывает параметр для получения соответствующих данных. Теперь, в компоненте деталей, у меня есть следующая кнопка, с которой я увеличиваю идентификатор и получаю результат через router.navigate. Все работает хорошо. Ниже TodoDetailsComponent

TodoDetailsComponent.ts 

export class TodoDetailsComponent implements OnInit{
  todo;
  id;
  constructor(private activatedRoute: ActivatedRoute, private service: Service, private router: Router) { }

  ngOnInit() { 
    this.activatedRoute.paramMap.pipe(
      switchMap(params => {
        this.id = +params.get('todoId');
        return this.getTodo(+params.get('todoId'))
      })
    ).subscribe(todo => this.todo = todo);
  }

  getTodo(id) {
    return this.service.getTodo(id);
  }

  next() {
    this.router.navigate(['/todos', this.id+1])
  }

То, что я хочу знать, это то, что в сценарии реальной жизни, скажем, как в MongoDB, где идентификаторы в последовательности не отличаются от этого случая. Чтобы преодолеть это, я попытался отобразить объекты и неявным образом добавить todoId в моем сервисе последовательно, и вместо навигации по идентификатору используйте навигацию по todoId.

Это нормально делать так или я что-то упускаю в Angular, о котором я не знаю, или если у кого-то есть какой-то лучший или более надежный способ сделать это.

Здесь - полный код для получения дополнительной информации о коде, если требуется. Благодарим за любую помощь.

сервис 

getTodos() {
    let todoId = 0;
    return this.http.get<any>(`${this.url}`)
    .pipe(
     map(todos => todos.map(todo => ({...todo, todoId: ++todoId}))
     )
  }

1 Ответ

0 голосов
/ 12 ноября 2018

Если ваши данные идут в этом формате:

data = [ { name: 'bob', age: 21 }, { name: 'alice', age: 22 }, { name: 'eric', age: 23 }, ];

Может быть, вы можете попробовать что-то вроде этого: 

export class AppComponent implements OnInit {
  index = 0;

  data = [
    {
      name: 'bob',
      age: 21
    },
    {
      name: 'alice',
      age: 22
    },
    {
      name: 'eric',
      age: 23
    },
  ];

  data$: Observable<any>;

  ngOnInit() {
    this.data$ = of(this.data);
  }

  previous() {
    if (this.index > 0) {
      this.index--;
    }
  }
  next() {
    if (this.index < this.data.length - 1) {
      this.index++;
    }
  }
}

<div *ngIf="data$ | async as item">
  <p>{{ item[index]?.name }}</p>
  <p>{{ item[index]?.age }}</p>
</div>
<button (click)="previous()">Previous</button>
<button (click)="next()">Next</button>

Вы можете попробовать это здесь: https://ng -run.com / edit / HyzjWGNl9xM9Jg2aR90w

...