Angular - 如何与其他组件共享类的属性？

如何解决Angular - 如何与其他组件共享类的属性？

我正在尝试在我的角度表中实现服务器端过滤。为了做到这一点，我添加了一些使用 ngModel 填充此组件属性的表单：

@Component({
  selector: 'app-form',templateUrl: './form.component.html',styleUrls: ['../sequences.component.css']
})
export class FormComponent implements OnInit {

  constructor() { }

  panelOpenState = false;
  formGroup!: FormGroup;

/*These are the properties that get updated as the user writes in the forms*/
  sequenceId!: string;
  asOrigin!: number;
  public prefix!: string;
  suffix!: number;
  collectorIp!: string;
  collectorAsn!: string;
  durationGreater!: number;
  durationSmaller!: number;
  startDate!: Date;
  endDate!: Date;
  updates!: number;
  withdraws!: number;
  announces!: number;

  @ViewChild('input') input!: ElementRef;
  ngOnInit(): void {
    this.formGroup = new FormGroup({
      sequenceId: new FormControl(null,[Validators.pattern('[0-9a-fA-F]{24}')]),prefix: new FormControl(null/*,[Validators.pattern('[a-z0-9.:]{,20}((::)|.)/[0-9]{2}')]*/),collectorPeerIp: new FormControl(null,[Validators.pattern('[a-z0-9]{5,}')]),asOrigin: new FormControl(null),suffix: new FormControl(null),collectorAsn: new FormControl(null),durationGreater: new FormControl(null),durationSmaller: new FormControl(null),startDate: new FormControl(null),endDate: new FormControl(null),updates: new FormControl(null),withdraws: new FormControl(null),announces: new FormControl(null),});
  }

在我的主要组件中，我得到了一个 fromEvent 函数，该函数在将某些内容输入到表单中时调用函数 loadSequences

  datiForm!: FormComponent;

  ngAfterViewInit() {
    this.paginator.page.subscribe(x => this.loadSequences());
    this.loadSequences();
    this.dataSource.length.subscribe(x => this.paginator.length = x);
    fromEvent(this.input.nativeElement,'keyup')
    .pipe(
        debounceTime(150),distinctUntilChanged(),tap(() => {
            this.paginator.pageIndex = 0;
            this.loadSequences();
        })
    )
    .subscribe();
  }

  loadSequences(): void{
    this.dataSource.loadSequences(this.paginator.pageIndex + 1,this.paginator.pageSize,'00',this.datiForm);
  }

这个函数定义在 DataSource 类中，它决定了数据表中显示的内容。

loadSequences(pageIndex: number,pageSize: number,rrc: string,datiForm: FormComponent) {

        this.loadingSubject.next(true);

        this.sequencesService.findSequences(pageIndex,pageSize,rrc,datiForm).pipe(
                finalize(() => this.loadingSubject.next(false)),tap(x => this.length.next(x.total))
            )
            .subscribe((sequences: PaginatedResult) => {
            this.sequencesSubject.next(sequences.items);
        });
    }

它调用了我正在研究的函数 findSequences。我试图做到这一点，当 FormComponent 的属性具有特定值时，它会向特定 URL 发送 http 请求。这个 URL 应该使用属性作为参数，但现在我只是想确保 FormComponent 的值实际上被服务读取。这是我尝试使用前缀属性的服务：

@Injectable({
  providedIn: 'root'
})
export class SequencesService {

  constructor(private http: HttpClient) { }

   findSequences(pageIndex: number,datiForm: FormComponent): Observable<PaginatedResult> {
        if (datiForm.prefix === '2a0d:8d80::/32'){
          return this.http.get<PaginatedResult>('https://bgpie.net/api/rrc/00/sequence?limit=20&page=1&prefix=2a0d:8d80::%2F32')
        }
        else{
        return this.http.get<PaginatedResult>('https://bgpie.net/api/rrc/' + rrc + '/sequence',{
            params: new HttpParams()
                .set('page',pageIndex.toString())
                .set('limit',pageSize.toString())
        });
      }
    }

通过这样设置的函数，表被发送到一个无休止的加载过程中，并且永远不会显示任何数据。