共有および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がngOnChangesグラブではなく、ロードされているよう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です。 postsコンポーネントへの変更をmapcomponentに通知する最良の方法は何ですか？あなただけ*ngForでフィルタされたバージョンを使用しているので、

Answer 1

パイプは、EventComponentに元postsプロパティを上書きしません。

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

より良い解決策は、1の両方のことを、EventComponentコンストラクタにそのパイプを注入し、検索入力の変化を聴いたり、searchを見て、別の属性を更新し、のパイプを使用してそれに応じてfilteredPostsを言わせて、使用することです*ngForと<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); 
     }); 
    } 
}