Почему я не могу передавать стрелочные функции в свойствах компонента angular

Question

шаблон другого компонента:

<app-search-bar [onSearch]="content => onSearch(content)"></app-search-bar>

Ошибка: ошибка анализатора: привязки не могут содержать назначения в столбце 10 в [content => onSearch (content)]

app-search-bar.component.ts:

...
export class SearchBarComponent implements OnInit {
  searchText = '';
  @Input() onSearch: (content: string) => void;
  constructor() { }

  ngOnInit(): void {

  }

}

Я новичок * от ie до angular, я не знаю причину, это неверно, так что IDE не может знать какие атрибуты передает компонент. По сравнению с моделью программирования reactjs это очень недружелюбно

Answer 1

Синтаксический анализатор шаблонов допускает базовый c JavaScript синтаксис, который все еще можно использовать для создания сложных операторов, но желательно оставить его базовым c

Если вам нужно указать больше сложный синтаксис, такой как функция стрелки, просто назначьте его свойству компонента и вместо этого укажите это свойство в шаблоне

https://angular.io/guide/template-syntax

Answer 2

Связь между компонентами в angular может осуществляться несколькими способами:

• Двусторонняя привязка данных / события ввода и вывода / через службу ...
• Состояние на стороне клиента (с использованием ngrx )

Давайте сделаем наш компонент настолько простым, мы предполагаем, что ваше приложение не зависит от состояния для использования NGRX Инструмент (рекомендуется для больших и сложных приложений angular).

Во-первых, ваш компонент «app-search-bar» должен отображать, например, вводимый текст с кнопкой, щелчком по Кнопка запускает событие в родительском компоненте, чтобы отфильтрованные результаты поиска отображались на странице:

export class SearchBarComponent implements OnInit {
  searchText = '';
  @Output() onSearch = new EventEmitter<boolean>();
  constructor() { }
  ...

  fireSearch() {
   this.onSearch.emit(this.searchText);
  }

}

А html компонента «app-search-bar» выглядит так:

<input type="text" [value]="searchText">
<button (click)="fireSearch()">Search</button>

Наконец, в родительском контейнере вы должны проверить событие onSearch с предоставленным контентом, чтобы фильтровать данные и все равно отображать их на странице:

    <app-search-bar (onSearch)="onSearch($event)"></app-search-bar>
    <table>
     <thead>
       <tr> 
        <th>First column</th>
       </tr>
      </thead>
      <tbody *ngIf="data">
       <tr *ngFor="item in data">
        <td>{{ item.columnValue }}</td>
       </tr>
      </tbody>
    </table>

И в классе машинописного текста родительского компонента nt, вы должны реализовать событие следующим образом:

export class ParentComponent implements OnInit {
  data;
  ....

  onSearch(content: string) {
   // do some staff here to filter the data and assign it to the property "data"
   this.data = ....;
  }

}

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

Я рекомендую вам следовать официальной документации Angular, которая поможет вам разработать образец приложения и понять все замечательные функции Angular framework.