共享与在angular2部件之间滤波的值

Question

我有一个组件，可以像这样拉入值posts ：

 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模板中循环，然后将其注入到另一个名为“ mapCompenent”的组件中，并使用管道在html中对其进行过滤：

循环“ EventComponent”内容

<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;
          }
        });
      }
    }

mapComponent

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);
  }
}

加载页面后， mapcomponent会立即抓住ngOnChanges BUT，而不是在使用过滤器对帖子进行过滤时，循环会精细地更新帖子，并且过滤器可以正常工作，那里的问题是mapcomponent。 通知mapcomponent更改posts对象的最佳方法是什么？

Answer 1

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

<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>

一种解决方案是也将管道添加到<mapComponent>的posts属性，但是请注意不能将其双向绑定（ [()] ），然后应将其更改为单向（ [] ）。 。

<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>

更好的解决方案是将该管道注入到EventComponent构造函数中，侦听搜索输入中的更改或观看search并更新另一个属性，例如，使用该管道相应地进行filteredPosts ，并在*ngFor和<mapCompenent>使用该管道<mapCompenent> ：

@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);
        });
    }
}