页面内的组件在 iOS 导航时没有动画

Question

通过调用

NavController.navigateForward('/url')

导航到新屏幕时，您将获得一个免费的本机动画，该动画可将屏幕滑入查看。除非我在页面组件中使用组件，否则这将按预期工作。当我这样做时，除了页面内的组件之外，所有内容都会按预期动画。

当导航到以下页面时，内容和标题都会按预期滑入视图。

<ion-header>
    <h1>The Title</h1>
</ion-header>
<ion-content>
    Some content...
</ion-content>

但是，如果我将

h1

标签提取到组件中，则只有“某些内容...”会滑入视图。显示“标题”时没有动画。

<ion-header>
    <app-my-component>The Title</app-my-component>
</ion-header>
<ion-content>
    Some content...
</ion-content>

Answer 1

发生这种情况的原因是因为 Ionic 希望

ion-title

位于某个位置才能进行动画处理。您可以通过检查 iOS 页面转换的源代码看到这一点。

正如你所看到的这里 Ionic 获取输入

ion-toolbar

像这样：

const enteringToolBarEls = enteringEl.querySelectorAll(':scope > ion-header > ion-toolbar');

并且这里它得到

ion-title

，如下所示：

enteringTitle.addElement(enteringToolBarEl.querySelector('ion-title'));

这是行不通的，因为如果您在

ion-header

中使用自定义组件，HTML 代码的结构将会有所不同：

ion-header > your-component > ion-toolbar

建议不要在

ion-header

中使用自定义组件，因为 Ionic 希望它以特定的方式进行正确的动画处理。

---

话虽这么说，如果您确实需要在那里使用自定义组件，您可以像这样创建自己的自定义页面转换：

1. 创建一个新文件

   myAwesomeTransitionAnimation.ts

   ，其中包含iOS页面转换的源代码的内容。
2. 编辑代码以使转换适用于您的特定 HTML 结构
3. 编辑

   app.module.ts

   文件以使用该过渡而不是默认过渡：

imports: [
    ...
    IonicModule.forRoot({  
      navAnimation: myAwesomeTransitionAnimation,
    }), 
  ],

请记住，这样做会覆盖整个应用程序中所有

ion-nav

和

ion-router-outlet

的默认“动画”。

如果您只想在 iOS 上覆盖它（使用 Android 的默认值），请查看

此评论：

let ionic = [
  IonicModule.forRoot()
];

const platform = new Platform();

if (platform.is('ios')) {
  ionic = [
    IonicModule.forRoot({
      navAnimation: myAwesomeTransitionAnimation,
    })
  ]
}

在模块导入中：

imports: [ ...ionic, ]

Answer 2

我知道这个问题已经很老了，但我想分享另一个我发现的专门使用 Angular 功能的简单且非常有用的解决方案：“ViewContainerRef”（该方法归功于

这个答案）。

在页面

.html

：

<ion-header>
  <my-toolbar></my-toolbar>
</ion-header>

.html

：

<ng-template #template>
  <ion-toolbar>
    <ion-title>Example</ion-title>
  </ion-toolbar>
</ng-template>

.ts

：

@ViewChild('template', { static: true }) template;


constructor(
  private viewContainerRef: ViewContainerRef
) { }

ngOnInit() {
  this.viewContainerRef.createEmbeddedView(this.template);
}

这允许 ion-toolbar 直接嵌入到 ion-header 中，而不是被模糊的 my-toolbar 元素包裹，并且完全避免修复转换问题。

希望这能帮助其他人在 2023 年遇到这个问题！

Answer 3

@monkemads 非常感谢你