如何在父组件中强制刷新子组件

Posted 2023-05-15

参考技术A

尝试，得知：在第一次首页渲染完成之后，点击 待办任务 或者 已提交任务 ，只有表格视图的局部重新渲染，而分页组件不会再次渲染，故传值无法实现。

如果要在组件内部中进行强制刷新，则可以调用 this.$forceUpdate() 强制重新渲染组件，从而达到更新目的。

在父组件中发生事件后禁用子组件中的按钮，而无需刷新页面以使禁用生效

【中文标题】在父组件中发生事件后禁用子组件中的按钮，而无需刷新页面以使禁用生效

【英文标题】：Disable button in Child Component after an event in parent component without having to refresh the page for the disable to take effect

【发布时间】：2020-09-14 18:25:02

【问题描述】：

我的代码有效，但仅在页面刷新后。例如。我可以单击“继续”按钮，页面将刷新而不是在应用程序中向前移动，现在该按钮将被禁用。但是我正在寻找的是，一旦从父组件的下拉列表中选择了某个值，就禁用该按钮。继续按钮是它自己的子组件，因为它在应用程序中的许多其他组件中使用。在 Angular 版本 6 上。

父组件.html

... //Select dropdown that sets the disableContinueButton value based on what is selected

<df-child-component
    [forwardOnly]="true"
    [isAppLoading]="isAppLoading"
    [forwardDisabled]="disableContinueButton$ | async"
    [submitButtonText]="'Continue'"
  >
</df-child-component>

父组件.ts

export class ParentComponent implements OnChanges, OnInit 
      disableContinueButton$ = of(false);
      ...
      onSelectEvent() 
          //Sets the disableContinueButton flag based on what is selcted.
      

子组件.ts

import 
  Component,
  ChangeDetectionStrategy,
  Output,
  EventEmitter,
  Input,
 from '@angular/core';

@Component(
  selector: 'df-child-component',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush,
)
export class ChildComponent 
  @Input()
  forwardOnly: boolean;
  @Input()
  isAppLoading: boolean;
  @Input()
  forwardDisabled: boolean;
  @Input()
  submitButtonText: string;

  @Output()
  back = new EventEmitter();
  @Output()
  forward = new EventEmitter();

子组件.html

      <button
        type="Submit"
        class="btn btn-primary col-sm-2 order-1 order-sm-2 mb-2"
        (click)="forward.emit()"
        [disabled]="isAppLoading || forwardDisabled"
        id="nav-continue"
      >
         submitButtonText 
      </button>

【问题讨论】：

你如何更新 disableContinueButton$？

使用重新赋值：this.disableContinueButton$ = of(true);

【参考方案1】：

我无法重现这一点，但我的猜测是您的更改检测由于某种原因没有捕获更改。

我建议您使用 BehaviorSubject 或 Subject 而不是 observable：

export class ParentComponent implements OnChanges, OnInit 
      disableContinueButton$ = new BehaviourSubject(false);
      ...
      onSelectEvent() 
          this.disableContinueButton.next(true); // true or false
      

如果这仍然不起作用，您可以通过注入 ChangeDetectorRef 并在其上调用 markForCheck 或 detectChanges 来强制运行更改检测：

export class ParentComponent implements OnChanges, OnInit 
    constructor(private readonly _changeDetectorRef: ChangeDetectorRef)  

    onSelectEvent()
        // Update the value
        this._changeDetectorRef.markForCheck();
    

【讨论】：

你能举个例子吗？

【参考方案2】：

使用 ViewChild 将允许您从父组件触发子组件中的函数。