主页 / 问题 / 1028782
Accepted
bruce
Asked:2020-09-28 01:49:21 +0800 CST2020-09-28 01:49:21 +0800 CST

*ngIf 有实时钩子吗？

  • 772

情况如下：我有一个具有这种结构的组件：

<app>
 <ng-container *ngIf="flag">
  <component-one> </component-one>
  <component-two> </component-two>
  <component-three> </component-three>
 </ng-container>
</app>

有一个服务（serviceGeneral）包含一个通用表单（ formgroup ）。

在 app 组件中，在某个方法中，将flag更改为 true。将标志更改为 true 后，相应地呈现组件（*ngIf 变为 true）。每个组件初始化的时候，对应的formgroup被添加到大表单的通用服务中（即component-one组件初始化时，该组件的formgroup字段被添加到通用表单中）。将 flag 标志更改为 true 后，我指定serviceGeneral表单的逻辑。

问题：更改标志后，组件尚未呈现（由于尚未将新字段添加到整个表单中），因此我无法处理表单。

解决方案：更改标志后将您的逻辑包装在 setTimeout() 中。

问题：有没有更优雅的方法来解决我的问题？没有 setTimeout ？或者这是最好的解决方案？

method() {
 this.flag = true;
 let groups = this.generalFormService.form;
 ...
}

我的决定：

method() {
 this.flag = true;
 setTimeout( () => {
   let groups = this.generalFormService.form;
 }, 0);
 ...
}
angular

1 个回答

  1. Best Answer

    Angular 的基石是 RxJS。锤子已经自带框架，大部分问题都可以通过Rx解决。

    在这里，无论如何，您都必须更改所有组件和服务，否则逻辑最初是不正确的。正如 Ben Lesh 所说：“如果你在使用setTimeout，那么你做错了什么。” 在某种程度上，我同意他的观点，我自己，个人，不记得上一次是什么时候使用的setTimeout。

    3 组件不应该直接与服务表单交互，为此服务中必须有一些方法：

    this.generalFormService.form.addControl(...); // неправильно
this.generalFormService.addControl(...); // правильно

    如果另一个类有一个隔离某些逻辑的方法，那么将来只需要在这个方法中进行更改，而不是在所有组件中进行更改。

    此外，如果你知道你有多少子组件，那么你可以简单地在服务中创建一个事件生成器，它会在 3 个组件添加控件后发出一个值，并在父组件中订阅它：

    class GeneralFormService {
  form$ = new Subject<void>();

  form = new FormGroup();

  addControl(...) {
    this.form.addControl(...);
    this.form$.next();
  }
}

class ParentComponent {
  flag = false;

  private destroy$ = new Subject<void>();

  constructor(generalFormService: GeneralFormService) {
    generalFormService.form$
      .pipe(
        // 3 - кол-во компонентов, которые взаимодействуют с сервисом
        bufferCount(3),
        map(() => generalFormService.form),
        takeUntil(this.destroy$)
      )
      .subscribe(form => {
        console.log(form);
      });
  }

  method() {
    this.flag = true;
  }
}

    如果有很多子组件并且您不知道它们中的哪些与服务交互，那么您可以简单地访问ng-container和装饰 setter：

    @Component({
  selector: 'app-parent',
  template: `
    <ng-container *ngIf="flag" #container>
      ...
    </ng-container>
  `
})
class ParentComponent {
  flag = false;

  @ViewChild('container')
  set container(container: undefined | ElementRef<Comment>) {
    // если `container = undefined`, значит `ngIf=false`
    if (container) {
      console.log(this.generalFormService.form);
    }
  }

  constructor(private generalFormService: GeneralFormService) {}

  method() {
    this.flag = true;
  }
}

    我不知道您使用的是哪个版本的 Angular，它应该在问题中指定，如果是 8，那么您需要将选项添加到 decorator { static: false }。

    同样，以上所有这些示例都不是最佳实践，它们只是您问题的间接解决方案。提前考虑一下，问题就会少很多😉😉

    一般来说，ng-container您可以使用某种您自己的组件并通过ng-content. 在组件本身中，创建一个方法ngAfterContentInit和某种事件生成器：

    @Output() childrenRendered = new EventEmitter<void>();

    在此方法中引发事件：

    ngAfterContentInit(): void {
  this.childrenRenfered.emit();
}

    并在上面听：

    <app-some-wrapper *ngIf="flag" (childrenRendered)="childrenRendered()">
  <component-one></component-one>
  ...
</app-some-wrapper>
    • 1

相关问题