如何通过单击不同组件的按钮来更新反应式表单字段? [英] How to update a reactive form field by button click on different component?

问题描述

我有一个应用程序，我的要求是单击按钮(出现在标题组件中)，另一个组件中的表单字段将更新.但问题是该值在表单控制变量中设置但未反映在 UI 中.这是示例代码 我已经创建了.您可以在控制台日志中单击按钮时看到表单具有值但未在 UI 中呈现.下面我展示了我的代码到目前为止我所做的:

I have an application where my requirement is upon a button click (present in header component) the form field in another component will get updated. But the problem is the value is getting set in the form control variable but is not reflecting in UI. This is the sample code I've created. You can see on button click in console log that the form has the value but is not rendered in UI. Below I am showing my code what I have done so far :

子组件

// In TS
test = this.fb.group({
    sample: [""]
});

// In HTML
<form [formGroup]="test">
  <input placeholder="Sample" formControlName="sample" />
</form>

标题组件

// In TS
import { ChildComponent } from "../child/child.component";

constructor(private child: ChildComponent) {}

set() {
  this.child.test.patchValue({
    sample: "fetched value"
  });
  console.log(this.child.test.value);
}

// In HTML
<button (click)="set()">ABC</button>

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

import { AppComponent } from './app.component';
import { HeaderComponent } from './header/header.component';
import { ChildComponent } from './child/child.component';
import { AppRouterModule } from './router/router.module';

@NgModule({
  imports:      [ BrowserModule, FormsModule, AppRouterModule, ReactiveFormsModule ],
  declarations: [ AppComponent, HeaderComponent, ChildComponent ],
  providers: [ ChildComponent ], // Specified child component to access through different component
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

app.component.html

<app-header></app-header>
<router-outlet></router-outlet>

这是我的代码.谁能告诉我问题出在哪里?

So this is my code. Can anyone tell me where the problem is lying ?

推荐答案

这不是 Angular 中组件交互的工作方式.要在组件之间共享数据，您可以对相关组件使用 EventEmitter，或者对不相关组件使用单例服务.

That isn't how the component interaction works in Angular. To share data among components, you could either use EventEmitter for related components or a singleton service for unrelated components.

这是使用单例服务的示例

Here is an illustration using a singleton service

share.service.ts

import { Injectable } from "@angular/core";

import { ReplaySubject } from "rxjs";

@Injectable()
export class ShareService {
  public headerClickSrc = new ReplaySubject<any>(1);
  public headerClick$ = this.headerClickSrc.asObservable();

  constructor() {}
}

header.component.ts

import { Component } from "@angular/core";
import { ShareService } from "../share.service";

@Component({
  selector: "app-header",
  templateUrl: "./header.component.html"
})
export class HeaderComponent {
  constructor(private share: ShareService) {}

  set() {
    this.share.headerClickSrc.next("fetched value");
  }
}

child.component.ts

export class ChildComponent implements OnInit, OnDestroy {
  closed$ = new Subject<any>();
  constructor(private fb: FormBuilder, private share: ShareService) {}

  test = this.fb.group({
    sample: [""]
  });

  ngOnInit() {
    this.share.headerClick$.pipe(
      takeUntil(this.closed$)
    ).subscribe({
      next: value => {
        this.test.patchValue({
          sample: value
        });
        console.log(this.test.value);
      }
    });
  }

  ngOnDestroy() {
    this.closed$.next(); // <-- close open subscriptions
  }
}

我已经修改了你的 闪电战

这篇关于如何通过单击不同组件的按钮来更新反应式表单字段?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！