0

我使用 Angular 原理图 ( ng generate @angular/material:dashboard) 在 component.ts 文件中生成以下代码：

cards = this.breakpointObserver.observe(Breakpoints.Handset).pipe(
map(({ matches }) => {
  if (matches) {
    return [
      { title: 'Card 1', cols: 1, rows: 1 },
      { title: 'Card 2', cols: 1, rows: 1 },
      { title: 'Card 3', cols: 1, rows: 1 },
      { title: 'Card 4', cols: 1, rows: 1 }
    ];
  }

  return [
    { title: 'Card 1', cols: 2, rows: 1 },
    { title: 'Card 2', cols: 1, rows: 1 },
    { title: 'Card 3', cols: 1, rows: 2 },
    { title: 'Card 4', cols: 1, rows: 1 }
  ];
})

);

但是我无法理解它在做什么。有几个组件会引起一些混乱：

  1. =>语法在做什么？因为它是一个符号，所以我很难想出一个谷歌搜索。编辑：这个问题的答案在这里
  2. 地图功能在做什么？我理解地图，但通常我将一个函数映射到一组值。这就是这里发生的事情吗？换句话说，什么被映射到什么？
  3. 管道功能在这里做什么？从这篇文章我明白：

pipe() 函数将要组合的函数作为其参数，并返回一个新函数，该函数在执行时按顺序运行组合函数。

但是，我不清楚组合函数在这里做什么。

4

1 回答 1

3
  • 简单地pipe允许您组合多个功能。而不是：
f1(f2(f3(param)));

你将拥有：

pipe(f1, f2, f3)(param);

这是一个很好的解释：管道如何工作

  • 它map是 rxjs 的一部分，一套工具，它将投影一个 observable 的每一项。这里有相关文档：了解地图。在这里，matches 是 Angular 的一个特殊属性，当里面的条件为真时它为observe真。匹配项被映射到 if 条件中。在这种情况下，如果 breakpointObserver 检测到屏幕小于手机，则匹配为真，随后将仅返回单列卡片。否则，if 条件解析为 false 并返回两列版本。有关详细说明，请参阅此博客。

  • 这arrow function (lambda)只是一种编写函数的方法，所以不是：

Observable.map(item => {//do something});

你可以有 ：

Observable.map(function(item) {//do something});

请注意，箭头函数隐藏了一些我不会冒险解释的行为，但在 React 中（因为您添加了标签），箭头函数允许您将方法绑定到“this”，而无需使用旧方法( const myFunc = this.myFunc.bind(this))

于 2020-04-27T00:13:14.520 回答