从父母更新子部分

Question

在 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();
}

我有共享的服务，并且在此处建议使用界面。

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'中时，我在父级中输入搜索字符串，它不会更新我的孩子组件。

我该怎么办？

Answer 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)
}