Angular 如何将数据从父级多次传递给子级

我正在构建一个Angular 2应用程序，在同一页面上显示搜索表单和结果。我已经使用路由来显示结果部分。所以父组件是带有多个字段的搜索表单，子组件从后端获取结果并显示它

因为搜索条件涉及多个字段，所以我通过共享服务将搜索条件传递给子组件

父组件：

 @Component({
       templateUrl : 'app/search-form.template.html'
    })
    export class SearchFormComponent {

         constructor(private  searchService : SearchService,
                private router: Router){}

         submitSearch(){
          this.searchService.setSearchCriteria(this.model);
          this.router.navigate(['search-form/search-result']);
      }

子组件：

 @Component({
         templateUrl: 'app/search-result/search-result.template.html'
    })
    export class SearchResultComponent implements OnInit{
        private searchResult = [] ;
        constructor(private searchService: SearchService) { }

         ngOnInit() {
                this.searchService.getSearchResult().subscribe(data => {
              this.searchResult = data;
          });

    }

以下是服务代码：

 @Injectable()
    export class SearchService{
       constructor (private http: Http) {}

    setSearchCriteria(searchCriteria : SearchCriteria){
      this.searchCriteria = searchCriteria;
    }

    getSearchResult() : Observable<any> {
        let body = JSON.stringify(this.searchCriteria);
        let headers = new Headers({'content-type' : 'application/json'});
        let options = new RequestOptions({headers : headers});
        return this.http.post(this.baseUrl , body, options)
            .map((res: Response) => res.json().root || {});
    }

main.html如下所示。此处，搜索表单（父级）呈现为“搜索表单”

    <nav class="navbar" >
        <div class="container-fluid">
            <router-outlet></router-outlet>
        </div>
      </nav>

不清楚您是如何将此连接起来的。您说
SearchResultComponent
是
SearchFormComponent
的子组件，但您在运行
setSearchCriteria
后导航到它，就好像它自己的组件在哪里一样。因为我们看不到模板，所以很难理解发生了什么

我通常这样做的方式是在
setSearchCriteria（）
之后在父级中运行
getSearchResult（）
，并在
@Input
中将结果传递给子级。如果您正在使用类似ActivatedRoute服务的方式导航父代码，则将子代码从
ngOnInit
移动到
ngochanges
，在输入更改时将刷新子代码
 您应该在
搜索服务
中添加
主题
。将其称为类似于
currentResult
。一个主体就像一个双向可观察物，它既是生产者又是消费者。因此，在父端，你可以是生产者，而子端是消费者

您可能不想在onInit中设置搜索条件，但是当父级中发生某些操作时。然后你可以为孩子创造一些价值，让他们倾听

也许是这样的

从'rxjs/Subject'导入{Subject}

@Injectable()
class SearchService {
  private currentSearch = new Subject<any>();

  searchAndSetCurrent(criteria) {
    this.http.get(..).toPromise().then(result => {
      currentSearch.next(result);
    });
  }

  getCurrentSearch(): Observable<any> {
    // asObservable is not really necessary as you can subscribe
    // to a subject. But to make sure people calling this method
    // don't try to emit anything, we should just limit it
    // to the capabilities of an Observable
    return this.currentSearch.asObservable();
  }
}

有关
主题的更多信息
，您可以添加更多详细信息以显示导航谢谢您的回复，我在问题中添加了更多详细信息。我还希望使用child中的@Input-field将数据传递给子组件。但是，我不确定家长如何将该信息传递给孩子，因为数据绑定不会使用？如果这是琐碎的，很抱歉我的无知。好的，我稍微更改了我的代码。我没有使用路由器，而是根据结果显示/隐藏结果部分。在提交搜索条件时，我调用服务获取结果，并使用@Input将其传递给子组件。现在开始工作了：）谢谢你的帮助。接受你的回答
@Injectable()
class SearchService {
  private currentSearch = new Subject<any>();

  searchAndSetCurrent(criteria) {
    this.http.get(..).toPromise().then(result => {
      currentSearch.next(result);
    });
  }

  getCurrentSearch(): Observable<any> {
    // asObservable is not really necessary as you can subscribe
    // to a subject. But to make sure people calling this method
    // don't try to emit anything, we should just limit it
    // to the capabilities of an Observable
    return this.currentSearch.asObservable();
  }
}

searchAndSetCurrent(criteria)L Promise<any> {
  return this.http.get(..).toPromise().then(result => {
    currentSearch.next(result);
    return this;
  });
}