通过 Subject() 传递的参数无法识别值属性

Question

我在一个组件中有一个文本框，我希望在单击另一个组件中的按钮时将其值设为空白。假设有文本的组件叫CompA，有按钮的组件叫CompB。我在两个组件中都传递了一个服务，并在服务中创建了一个 Subject() （称为 abcService ），如下所示：

filterValuefeededToService = new Subject();

在 CompA 的 html 中，我在（输入）上做了一个模板引用和一个函数，如下所示：

<input type="text" #filtVal feedFilterTextVal(filtVal) />

在 CompA 的 ts 文件中，我做了：

feedFilterTextVal(filterValuefeeded) {
    console.log("filterValuefeeded", filterValuefeeded);
    this.abcService.filterValuefeededToService.next(
      filterValuefeeded
    );  

现在在 CompB 中，按钮在那里，我这样做：

this.abcService.filterValuefeededToService.subscribe(
            filterInput => {
              console.log("filterInput", filterInput);
            }
          );

我在filterInput 中获得了完整的输入。但是当我这样做时

console.log("filterInput value", filterInput.value);

出现错误：Property 'value' does not exist on type 'unknown'

所以我做了类似的事情：

this.abcService.filterValuefeededToService.subscribe(
            filterInput:HTMLInputElement => {
              console.log("filterInput", filterInput);
            }
          );

但它不起作用。请让我知道如何让CompB 识别它是一个 HTML 元素，以便我可以更改它的值。提前致谢。

Answer 1

您应该像这样在abcService 中创建主题：

  mySubject = new Subject();
  value = "holamundo!";

然后从compB 按钮单击推送值到主题。

  constructor(private _myService: AbcServiceService) { }
  clickHandler(){
     let value = "";
     this._myService.mySubject.next(value);
  }

然后从compA读取主题的值并更新输入框。

constructor(private _myService:AbcServiceService) { }
inputValue;
ngOnInit() {
   console.log(this._myService.value)
   this.inputValue = this._myService.value;

   this._myService.mySubject.subscribe((data)=>{
      this.inputValue = data;
   })
}

工作演示：link