Javascript 在angular2中的组件之间共享和筛选值

我有一个组件，它可以将一个值引入如下帖子：

 import { Component, OnInit} from "@angular/core";
   import template from "./event.component.html";
import style from "./event.component.scss";
@Component({
  selector: "EventComponent",
  template,
  styles: [ style ]
})
export class EventComponent implements OnInit {
  posts = [];
  constructor() {}
  ngOnInit() {
    this.posts = {'test': 0,'test': 1};
  }
}

然后，它在html模板（如so）中循环，并注入另一个组件（在本例中称为MapComponent）中。它还使用管道在html中进行过滤：

循环“EventComponent”内容

映射组件

---

一旦页面加载，mapcomponent就会抓取ngOnChanges，但在使用过滤器过滤帖子时不会抓取，循环会很好地更新帖子，过滤器在那里工作。问题在于mapcomponent。通知mapcomponent posts对象更改的最佳方式是什么

管道不会覆盖EventComponent中的原始posts属性，因此您只能在*ngFor中使用过滤版本：

更好的解决方案是将该管道注入EventComponent构造函数，监听搜索输入上的更改，或监视搜索并更新另一个属性，比如说使用管道相应地过滤日志，并在*ngFor和中使用该管道：

---

我也这么想，并在帖子中尝试了管道，但没有成功，我只得到了：Error:Uncaught in promise:Error:Template parse errors:Parser Error:Cannot在[posts | searchPipe:'wpcf-event-cat-location'：search=$event]@vimes1984中的第9列的动作表达式中有管道，这可能是因为您在那里使用了双向数据绑定。它应该是单向的。否则，使用第二种解决方案，我认为这比以同样的方式过滤同一事物两次要好。使用第二种解决方案，我不能将过滤器注入构造函数，它应该进入@Component声明。您需要将其添加到模块的提供程序中，以便注入器可以获得它。

<input  id="search_events" type="text" name="search_events" [(ngModel)]="search" ngDefaultControl/>
<mapCompenent [(posts)]="posts"></mapCompenent>
<div class="col s6 m6 l4 cards-container" *ngFor="let post of posts | searchPipe:'name':search "></div>

   import { Pipe, PipeTransform, Input, ChangeDetectorRef } from '@angular/core';
    import { FormGroup, FormControl, FormBuilder, Validators } from '@angular/forms';

    @Pipe({
      name : 'searchPipe',
      pure: false,
    })
    export class SearchPipe implements PipeTransform {

      public transform(value, key: string, term: string) {
        if(term === '' || typeof term === undefined ){
          return value;
        }
        return value.filter((item) => {
          if (item.hasOwnProperty(key)) {
            if (term) {
              let regExp = new RegExp('\\b' + term, 'gi');
              //this.ref.markForCheck();
              return regExp.test(item[key]);
            } else {
              return true;
            }
          } else {
            return false;
          }
        });
      }
    }

import { Component, OnInit, Input, OnChanges, SimpleChanges, SimpleChange } from "@angular/core";
import template from "./map.component.html";
import style from "./map.component.scss";

@Component({
  selector: 'mapCompenent',
    styles: [ style ],
  template
})
export class MapComponent implements OnInit, OnChanges{
  @Input() posts: object = {};

  ngOnInit() {

  }
  ngOnChanges(changes: SimpleChanges) {
    const posts: SimpleChange = changes.posts;
    console.log('prev value: ', posts.previousValue);
    console.log('got posts: ', posts.currentValue);
  }
}

<input  id="search_events" type="text" name="search_events" [(ngModel)]="search" ngDefaultControl/>
<mapCompenent [(posts)]="posts"></mapCompenent>
<div class="col s6 m6 l4 cards-container" *ngFor="let post of posts | searchPipe:'name':search "></div>

<input  id="search_events" type="text" name="search_events" [(ngModel)]="search" ngDefaultControl/>
<mapCompenent [posts]="posts | searchPipe:'name':search"></mapCompenent>
<div class="col s6 m6 l4 cards-container" *ngFor="let post of posts | searchPipe:'name':search"></div>

@Component({ ... })
export class EventComponent implements OnInit {
    posts = [];
    filteredPosts = [];

    constructor(private searchPipe: SearchPipe) {}

    ngOnInit() {
        this.posts = ...;

        this.form.search.valueChanges.subscribe((value) => {
            this.filteredPosts = this.searchPipe.transform(this.posts, 'name', value);
        });
    }
}