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模板中循环，并在这种情况下注入另一个组件，称为＆＃34; mapCompenent＆＃34;它也使用管道在html中过滤：

循环＆＃39; EventComponent＆＃39;内容

<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但不会在使用过滤器过滤帖子时，循环更新帖子并且过滤器在那里工作问题是mapcomponent 。通知mapcomponent更改posts对象的最佳方法是什么？

Answer 1

管道不会覆盖posts中的原始EventComponent属性，因此您只使用*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>的{{1}}属性中，但请注意它不能双向绑定（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>

在angular2中共享和过滤组件之间的值

1 个答案: