Question

我有一个过滤器组件，其中有2个字段可用于过滤目录列表和搜索按钮。

我想在所有目录列表显示的主要组件中显示过滤结果。

实际上一切正常，当我点击搜索按钮，搜索功能在filter.component.ts文件中运行并从api获取结果并在控制台中显示结果。但我无法将结果传递给必须显示过滤列表的主要组件。

Answer 1

没有看到任何代码示例。我希望你只是过滤已经获取的数据。如果绝对需要您获取另一组数据，则需要将该数据发送回父组件。

有很多方法可以做到这一点。使用@Output向父组件发出函数。或者使用服务和Observable。

以下是使用服务时要求的示例。 https://angular.io/guide/component-interaction#parent-and-children-communicate-via-a-service

// test.service.ts
import { Injectable } from '@angular/core';
import { Subject } from 'rxjs/subject';

@Injectable()
export class TestService {

  // Source
  private list = new Subject<Object[]>();

  // Observable Stream
  public list$ = this.list.asObservable();

  constructor() {}

  updateList(data) {
    this.list.next(data);
  }
}

// parent.component.ts
import { Component, OnInit } from '@angular/core';
import { TestService } from 'services/test.service.ts';

@Component({
  selector: 'parent-name',
  templateUrl: 'parent.component.html',
  providers: []
})

export class ParentComponent implements OnInit {
  list;

  constructor(
    private testService: TestService
  ) {
    testService.list$.subscribe(data => {
      this.list = data;
    });
  }

  ngOnInit() { }
}

// child.component.ts
import { Component, OnInit } from '@angular/core';
import { TestService } from 'services/test.service.ts';

@Component({
  selector: 'child-name',
  templateUrl: 'child.component.html'
})

export class ChilComponent implements OnInit {
  list;

  constructor(
    private testService: TestService
  ) { }

  ngOnInit() { }

  update(){
    this.testService.updateList(list);
  }
}

如何在角度4中显示搜索结果

1 个答案: