从父组件更新子组件答案

【问题标题】：Update child component from parent从父组件更新子组件
【发布时间】：2019-03-19 23:49:43
【问题描述】：

在layoutcomponent 这是我有表格的父母。在提交时，我正在从搜索组件中的 router-outlet 重定向子组件。这是我的提交

onSubmit({ value }: {
    value: Search
}) {
    this.sharedData.searchStr = value.Search;
    
    let urlSegments = this.router.url.split('/');

    let lang = urlSegments[1];

    let url = lang + '/search';
    this.router.navigateByUrl(url);


    this.searchval.reset();
}

我有共享服务，有接口as suggested here，它可以工作。

import { Injectable, Inject } from '@angular/core';
export interface ISharedModel {
    searchStr: string;
}
@Injectable()
export class SearchService {

    sharedComponent: ISharedModel = {
      searchStr: ''
    };

    constructor() { }
}

在子组件中我有ngOnInit

ngOnInit() {
    this.sharedData = this.sharedResource.sharedComponent;

    this.searchval = new FormGroup({
        Search: new FormControl(this.sharedData.searchStr)
    });
}

它有html页面

 <form (ngSubmit)="onSubmit(searchval)" [formGroup]="searchval" >
      <input type="text" placeholder="enter search string" formControlName="Search" class="form-control">
      <button class="btn btn-primary">search</button>
 </form>

所以重定向应用程序填充此文本框。但是当它已经在 `mydomain.com/en/search' 中并且我在父组件中输入搜索字符串时，它不会更新我的子组件。

我能做什么？

【问题讨论】：

你试过在你的子组件上使用@input 装饰器吗？如果您的参数通过此输入更改传递，则事件已传播并且通常您应该能够应用您的修改
我做不到。据我所知，当我在某处有组件标签时，我可以通过输入参数传递。但我没有。我正在通过路由器重定向那里。如果我不正确告诉我
好吧，我想我还不太了解你的情况。您可以发布 pklr 或其他内容以便更准确地查看您的问题吗？谢谢。

标签： angular

【解决方案1】：

您可以使用共享服务，但也可以跳过该服务并执行以下操作：

在您的 ChildComponent 中声明 String Subject:

public static yourString: Subject<String> = new Subject<string>();

在您的 ChildComponent 构造函数中：

YourChildComponent.yourString.subscribe(res => {
    this.searchval.patchValue({Search: res})
});

在你的父母中，例如 keyup-method:

updateValue(value) {
   YourChildComponent.yourString.next(yourUpdated value here)
}

【讨论】：

感谢您的回答。我试过你的答案，但我的子组件没有 return.next(false);
好的，当我测试它时，这对我有用......你在你的子组件中定义了Subject，对吧？
应该在子组件的ngOnDestroy中退订吗？