0

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

多亏了一个答案，我现在确实可以使用它，但是现在我正在尝试这样做，以便在提交不同组件中的表单时创建这些组件。

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

添加状态框.component.html：

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

添加状态框.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();
  }

状态框.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()时，名称字段输入通过 changeMes​​sage 函数传递给 StatusBoxService。

然后在 app.component.ts 的ngInit ()函数中，我们订阅 StatusBoxService 并从表单中检索传入的名称值。然后将其分配给 name 属性。

最后，我们将该名称添加到 myNames 数组中，但是我希望仅当我在add-status-box.component.ts中提交相同的表单时才发生将项目添加到数组中的关键步骤。因为正如你现在所看到的，我在 oninit() 期间将项目添加到这个数组中。

我确实找到了这个，似乎 ngSubmit 是一个 EventEmitter。看起来你可以订阅 EventEmitters。因此，我可以在app.component.ts中的app-status-box.component.ts中订阅 ngSubmit，这样我只在 ngSubmit 发生时才将项目添加到数组中。

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

任何帮助，将不胜感激。

4

1 回答 1

1

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

反正：

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

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

(2) 花点时间对 Observables 的工作原理有一个初步的了解。您订阅this.data.currentNamein的ngOnInit事实并不意味着您的回调函数只被调用一次，正如您所想的那样。每次发出新值时，该函数（您在其中编写的函数subscribe()）都会触发。只订阅一次。this.data.currentName

<app-status-box>(3)由于以下行，您在提交表单之前获得了初始渲染StatusBoxService：

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);
        }    
    });
  }
于 2021-08-09T14:49:54.033 回答