Ionic 离子/Angular -如何初始化组件而不显示可见的控件初始化

voase2hg  于 2022-12-16  发布在  Ionic
关注(0)|答案(1)|浏览(160)

我有一个Ionic 4 / Angular 8应用程序,在其中显示模态内部的组件。
例如

const modal = await this.modalController.create({
  component: MyComponent,

 ...
  await modal.present();
 ...

该组件包含一个Form(React式表单),初始化了各种控件,还使用*ngIfs隐藏/显示了部分。
我将一个@Input()的编号传递给组件。
我的问题是,当模态打开时,您首先可以看到它未初始化,然后它在设置控件时跳来跳去,UI的位通过*ngIfs显示/隐藏。
有没有一种方法可以让所有的东西都“隐藏”起来,直到所有的初始化都完成,这样用户就看不到所有的跳跃和控件的设置?

sy5wg1nm

sy5wg1nm1#

你至少有两个选择。
1.将所有内容 Package 在[hidden]="!ready"中,其中ready是一个属性,在加载所有内容后将其设置为true。与*ngIf不同,使用[hidden]仍将允许加载子组件。

<div [hidden]="!ready">
  <app-child>... secretly loading content ...</app-child>
</div>

这样做的一个小问题是,您必须在真实的的DOM元素上使用[hidden]--例如,不能使用<ng-container>
1.使用OnPush变更检测。

@Component({
  // ... other options omitted for brevity

  changeDetection: ChangeDetectionStrategy.OnPush
})
export class MyComponent {
  constructor(private changeDetector: ChangeDetectorRef) {}

  ngOnInit(): void {
    // load all the things
    // ...

    // now trigger change detection
    this.changeDetection.detectChanges();
  }
}

将两者结合起来可能是一个好主意,但您可能会侥幸逃脱任何一个
这两种方法都要求您正在使用的组件知道所有内容何时加载。如果控件此时无法确定这一点,则无论您采用哪种方法,都需要进行更改。

相关问题