页面中的组件在 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);
}

这允许离子工具栏直接嵌入到离子标头中，而不是被遮挡的 my-toolbar 元素包装，并且完全不必修复过渡问题。

希望这可以帮助其他人在 2023 年偶然发现这一点！