Что делает Angular Схема приборной панели материала c шаблонный код?

Question

Я использовал Angular schemati c (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. Что делает синтаксис =>? У меня были проблемы с поиском в Google, так как это символ. РЕДАКТИРОВАТЬ: Ответ на этот здесь
2. Что делает функция карты? Я понимаю карту, но обычно я сопоставляю функцию с набором значений. Это то, что здесь происходит? Сказал иначе, что отображается на что?
3. Что здесь делает функция канала? Из этого поста Я понимаю:

Функция pipe () принимает в качестве аргументов функции, которые вы хотите объединить, и возвращает новую функцию, которая при выполнении запускает составные функции в последовательности.

Однако мне не ясно, что здесь делают составные функции.

Answer 1

• pipe просто позволяет комбинировать несколько функций. Вместо:

f1(f2(f3(param)));

Вы получите:

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

Вот хорошее объяснение: Как работает труба

• map является частью rx js, набора инструментов, он будет проецировать каждый элемент наблюдаемой. Вот соответствующая документация: Понимание карты . Здесь match - это специальный атрибут Angular, который имеет значение true, если условия внутри 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))