Question

我目前正在关注Jogesh Muppala在Coursera上的Angular课程，问题在于下面的代码行。

   this.route.params.pipe(switchMap((params: Params) => this.dishService.getDish(+params['id'])))

其余代码如下。到目前为止，我的理解是this.route.params是一个Observable，并且this.dishService.getDish（+ params [id]）也将返回一个Observable。我的问题是了解（params：Params）如何到达那里。它用作箭头函数中的参数，并且在语句结尾附近由getDish函数使用。但是，在该行的开头，我们只能通过this.route.params访问params。是不同的参数吗？类型声明参数：参数使它看起来像是参数类型的全新实例。但是，如果是这样，getDish将如何使用它？

import { Component, OnInit} from '@angular/core';
import {Params, ActivatedRoute} from '@angular/router';
import {Location} from '@angular/common';
import{ Dish} from '../shared/dish';
import { DishService} from '../services/dish.service';
import { switchMap } from 'rxjs/operators';

@Component({
  selector: 'app-dishdetail',
  templateUrl: './dishdetail.component.html',
  styleUrls: ['./dishdetail.component.scss']
})
export class DishdetailComponent implements OnInit {

  dish: Dish;
  dishIds: number[];
  prev: number;
  next: number;


  constructor(private dishService: DishService, private route: ActivatedRoute,
    private location: Location) { 

  }

  ngOnInit() {
    this.dishService.getDishIds().subscribe(dishIds => this.dishIds = dishIds);
    this.route.params.pipe(switchMap((params: Params) => this.dishService.getDish(+params['id'])))
    .subscribe(dish => { this.dish = dish; this.setPrevNext(dish.id); });
  }

  setPrevNext(dishId: number) {
    const index = this.dishIds.indexOf(dishId);
    this.prev = this.dishIds[(this.dishIds.length + index - 1) % this.dishIds.length];
    this.next = this.dishIds[(this.dishIds.length + index + 1) % this.dishIds.length];
  }


  goBack(): void{
      this.location.back();
  }

}

感谢您阅读。

Answer 1

(params: Params)来自router.params，它是rxjs 6进行可观察的运算符链接的方式。

实质上，实际上发生的是.pipe接受一个函数列表，并且列表中的每个函数都获取前一个函数的值，除非其后跟一个tap或{{1} }等...

所以

filter

之前的书写方式

this.route.params.pipe(switchMap((params: Params) => this.dishService.getDish(+params['id'])))

因此它将从this.route.params.switchMap((params: Params) => this.dishService.getDish(+params['id']))中获取值，并将其传递到route.params运算符中，该运算符将从所传递的函数中返回结果的新switchMap。

Answer 2

有点像这样：

const bmw = {
  type: car,
  attributes: {
    color: 'red',
    year: 2000
  }
}

const attributes = bmw.attributes;

我们碰巧用相同的名称attributes来命名两个不同的事物：一个是变量，另一个是对象中的属性。它们之间没有任何关系，只是不幸的是，共享相同的名字。

对于您来说，在this.route.params中，params是this.route中的一个属性，它返回一个Observable。

(params: Params) => this.dishService...是一个匿名函数，与编写(function anon(params: Params) { this.dishService... }).bind(this)相同。在这里，params是函数接收的自变量的名称。

当this.routes.params的Observable上发出新值时，将执行上述函数。此处发出的值作为其参数传递给匿名函数，该函数恰好称为params。因此，它不需要点表示法，因为它不是指同一件事：它是指Observable中的值。

尽管此函数的根源是匿名函数（箭头函数），该函数是通过switchMap传递的，并且对源Observable（this.route.params）上的每个值都执行一次。每次执行时，switchMap都会将Observable中的当前值作为第一个参数params传入。 SwitchMap希望此函数向其返回一个新的Observable，它是this.dishService.getDish返回的。

HTH

这个切换图的论点从何而来？

2 个答案: