无法从服务变量中获取更新值

Question

我正在尝试根据服务变量应用过滤器来搜索项目，该服务变量使用来自该服务的输入进行更新。 但我只是从组件中的服务中获取初始值

服务 HTML （我输入的任何内容都被正确分配给变量 searchInput）：

<input [value]="searchInput" (keyup)="searchInputChange.next(searchFilterService.applyFilter($event.target.value))">

服务 TS （它被称为组件，因为我已经有一个同名 atm 的服务）：

export class SearchFilterComponent {

    searchInput: string = 'test';
    searchInputChange: Subject<string> = new Subject<string>();

    constructor(
        public searchFilterService: SharedSearchFilterService) {
        this.searchInputChange.subscribe((value) => {
            this.searchInput = value
        });
    }

    getSearchInput(): string {
        return this.searchInput;
    }
}

过滤服务 TS :

@Injectable()
export class SharedSearchFilterService {
    
    applyFilter(filterValue: string) {

        if (filterValue) return filterValue;
        else return ''; // I need this to avoid getting 'undefined'
    }
}

组件 HTML （这里我得到的初始值是“测试”，然后它永远不会从服务中获取新值）：

<ng-container *ngIf="searchFilterService.licenceFilter(item, service.getSearchInput())">

链接到示例： https : //stackblitz.com/edit/angular-buagfs

Answer 1

示例中的AppService是一个组件。 您必须使用@Output来通知值。

应用服务.ts

@Component({
  selector: 'search-component',
  template: `
    <div fxLayout="row" fxLayoutAlign="space-between center">
      <input
        [(ngModel)]="searchInput"
        (keyup)="onKeyUp()"
      />
    </div>
  `
})
export class AppService implements OnInit {
  searchInput: string = 'test';
  @Output() inputValue = new EventEmitter<string>();

  constructor() {
  }

  ngOnInit() {
    this.inputValue.emit(this.searchInput);
  }

  onKeyUp(): void {
    this.inputValue.emit(this.searchInput);
  }

  getSearchInput(): string {
    return this.searchInput;
  }
}

应用程序组件.html

<hello name="{{ name }}"></hello>
<search-component (inputValue)="onInputValueEmitted($event)"></search-component>
<div *ngIf="searchInput == 'test'">This shouldn't be seen if value is not 'test'</div>

app.component.ts

import { Component, OnInit } from '@angular/core';
import { AppService } from './app.service';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  name = 'Angular';
  searchInput = '';

  constructor(private service: AppService) {}

  onInputValueEmitted(value: string) {
    this.searchInput = value;
  }
}

Stackblitz 示例

Answer 2

您需要将变量this.searchInput等于您传递给函数getSearchInput的值

//see that the function has an argument
getSearchInput(searchInput:string): string {
    this.searchInput=searchInput //<--first equal the variable
    return this.searchInput;
  }

顺便说一句，Angular 还没有办法让你实现： FormControl 和valueChanges 。

如果您在 .html 中使用 FormControl

<input [formControl]="control" />

在你的 .ts

//create a "getter" to access easy to this.control.value
get searchInput()
{
  return this.control.value
}
set searchInput(value)
{
   this.control.setValue(value)
}

control=new FormControl()
constructor() {
  this.control.valueChanges.subscribe(value => {
      console.log('Prueba de subject: ', value);
  });
}