通过 *ngFor 中的组件传递 {(ngModel)}

Question

如何在其他组件中传递 {(ngModel)} 以在 *ngFor 中使用？ 我有一个带有搜索输入的导航栏，我正在使用 ng2-search-filter，我需要在另一个组件中传递 {(ngModel)}（带有结果的 table），但我不能。

模板：app.component.html

    <div [@routeAnimations]="o.isActivated ? o.activatedRoute : ''" class="main-content">
      <app-navbar></app-navbar>
      <router-outlet #o="outlet"></router-outlet>
    </div>

模板：navbar.component.html

    <input class="form-control" placeholder="Sarch" type="text" name="filter" [(ngModel)]="stringToLook">

模板：table.component.html

    <tr *ngFor="let object of (objects$ | async) | filter:filter | paginate: config | orderBy: key : reverse">

filter:stringToLook 不起作用（stringToLook 未定义）。

---

组件：table.component.ts

    .....
        @Input() stringToLook: any;
    .....

更新

我阅读了文档并做了，但没有用。

父组件

html

<form (submit)="setText(filter.value)" >
            <input class="form-control" name="filter" placeholder="Cerca" type="text" #filter>
            <button type="submit" style="display:none">hidden submit</button>
          </form>

ts

filter: string;
setText(filter: string) {
  this.filter = filter;
  console.log(this.filter);
  }

子组件

ts

@Input('filter') filter: string;

非常感谢

Answer 1

我修复了使用服务，在服务中我创建了变量 String 和一个 Setter，在 parent 组件中我设置了值，在 child 组件中我得到了值.

服务

filter: string;
setText(filter: string) {
    this.filter = filter;
    console.log(this.filter);
  }

Parent

Html

<form (submit)="service.setText(filter.value)" >
            <input class="form-control" name="filter" placeholder="Cerca" type="text" #filter>
            <button type="submit" style="display:none">hidden submit</button>
          </form>

TS 构造函数（...，私人服务：服务）

Child

只要你需要，就用service.filter

Answer 2

通常当我们想要跨组件共享数据时，服务是最好的选择。

我建议您使用更加异步的方式使用 rxjs observables 和 subjects 从您的服务中获取和设置数据。

更多：angular-8-communication-between-components-using-subject-and-observable

服务

_filter = new BehaviorSubject<string>('');
filter$ = this._filter.asObservable();

组件

ngOnInit() {
  this.subscription = this.service.filter$.subscribe(x => this.filter = x);
}

ngOnDestroy() {
  this.subscription.unsubscribe();
}

onChangeFilter(filterNewValue: any) {
  this.service._filter.next(filterNewValue)
}