Angular

Question

这个问题之前我。基本上，我试图做到这一点，因此当提交单独组件中的表单时，它会创建一个组件的新实例，并使用显示在该组件实例上的表单传入的值。这些组件是在我将数据添加到 app.component.ts.

中的数组时创建的

多亏了一个答案，我现在确实可以正常工作了，但现在我正在努力做到这一点，以便在提交不同组件中的表单时创建这些组件。

当表单中的数据添加到 app.component.ts 中的数组时，它会创建这些组件实例之一，但我只希望在表单出现时出现这种情况通过 ngSubmit 在单独的组件中提交，即 add-status-box.component.ts.

添加状态-box.component.html:

<form [formGroup]="AddStatusBoxForm" (ngSubmit)='addStatusBox()'>

添加状态-box.component.ts:

    export class AddStatusBoxComponent implements OnInit, OnDestroy 
    {
    
      message!: string;
      subscripton!: Subscription;
    
      constructor(private Form: FormBuilder, private data: StatusBoxService) { }
    
      AddStatusBoxForm = this.Form.group({
        name: ['']
      });
    
      ngOnInit(): void 
      {
        this.subscripton = this.data.currentMessage.subscribe(name => this.name = name)
      }
    
      ngOnDestroy(): void 
      {
        this.subscripton.unsubscribe();
      }

    addStatusBox()
    {
        this.data.changeMessage(this.AddStatusBoxForm.get('name')?.value);
        this.dialogRef.close();
    }
  }

app.component.ts:

export class AppComponent implements OnInit, OnDestroy
{

  name!: string;
  subscription!: Subscription;
  myNames: any[] = [];

  constructor(private data: StatusBoxService) {}

  ngOnInit(): void 
  {
    this.subscription = this.data.currentName.subscribe(name => this.name = name)
    this.myNames.push(this.name);
  }

  ngOnDestroy(): void
  {
    this.subscription.unsubscribe();
  }

状态-box.service.ts

export class StatusBoxService 
{
  private messageSource = new BehaviorSubject('defaulty');
  currentMessage = this.messageSource.asObservable();
  
  changeMessage(message: string)
  {
    this.messageSource.next(message);
  }
}

在我调用附加到 add-status-box.component.ts 表单 ngSubmit 的 addStatusBox() 的那一刻，名称字段输入通过 changeMessage 函数传递给 StatusBoxService。

然后在app.component.ts中的ngInit()函数中我们订阅了StatusBoxService并获取传入的名称从形式的价值。然后将其分配给名称属性.

最后我们将该名称添加到 myNames 数组中，但是我希望仅当我在 add-status-[=75 中提交相同的表单时才执行将项目添加到数组的关键步骤=]。因为正如你现在看到的，我在 oninit() 期间向这个数组添加了项目。

我做了 find this，而且 ngSubmit 似乎是一个 EventEmitter。看起来您可以订阅 EventEmitter。所以也许我可以在 app.component.ts 中订阅 app-status-box.component.ts 中的 ngSubmit 这样我只在 ngSubmit 发生时才将项目添加到数组中。

我不确定这是否正确，如果正确，我不确定我将如何实施它。我以前在从 StatusBoxService 检索名称值时使用过订阅，所以也许我可以做一些类似的事情？

如有任何帮助，我们将不胜感激。

Answer 1

为了避免在评论中进一步讨论，我尝试在回答中给你一些建议，尽管它可能不会详尽无遗。很难清楚地了解您的当前情况和您的要求（将一个工作示例放在一起会有所帮助）。

无论如何：

(1) 我不清楚您为什么要尝试使用动态组件。如果您的要求是为 myNames 中的每个项目显示一个组件，只需使用 ngFor:

<app-status-box *ngFor="let item in myNames"></app-status-box>

(2) 花点时间对 Observables 的工作原理有一个基本的了解。事实上，您在 ngOnInit 中订阅 this.data.currentName 并不意味着您的回调函数只被调用一次，就像您认为的那样。该函数（您在 subscribe() 中编写的函数）将在每次 this.data.currentName 发出新值时触发 。只订阅一次。

(3) 由于 StatusBoxService:
上的这一行，您将在提交表单之前获得 <app-status-box> 的初始呈现
private messageSource = new BehaviorSubject('defaulty');

再次，花点时间阅读文档 BehaviorSubject 的工作原理。一旦订阅，它将发出其当前值，并且由于您将 'defaulty' 定义为初始值，因此即使在提交表单之前，这也是您在 AppComponent 中获得的第一个值。要解决此问题，您可以将 null 作为初始值传递并在回调中添加检查。

最小示例：

// status-box.service.ts private messageSource = new BehaviorSubject(null); // app.component.ts ngOnInit(): void { this.subscription = this.data.currentName.subscribe(name => { if (name) { this.name = name; this.myNames.push(this.name); } }); }

Angular - 在一个组件中提交表单以在单独的不相关组件中触发操作

Angular - Submit form in one component to trigger action in seperate unrelated component

form-submit

ng-submit

angular-components

angular-event-emitter