無法從服務變量中獲取更新值

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