如何在使用NgModules的Angular 17应用中启用视图过渡？

在NgModules架构下，你不需要用provideRouter()，直接在**根模块（通常是AppModule）的RouterModule.forRoot()方法中添加withViewTransitions()**即可，具体操作如下：

1. 找到你的根模块（一般是AppModule），定位到其中配置根路由的代码段
2. 在RouterModule.forRoot()的第二个参数位置传入withViewTransitions()，示例代码：

@NgModule({
  imports: [
    // 根路由配置时添加视图过渡特性
    RouterModule.forRoot(routes, withViewTransitions()),
    // 其他模块导入项...
  ],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule { }

额外说明： #

• 子模块里的RouterModule.forChild()不需要添加该配置，根模块的设置会全局生效，所有路由切换都会应用视图过渡效果
• 如果需要自定义过渡行为，可以给withViewTransitions()传入配置对象，比如跳过初始页面过渡、添加自定义逻辑：

RouterModule.forRoot(routes, withViewTransitions({
  skipInitialTransition: true,
  onViewTransitionCreated: (transitionInfo) => {
    // 这里可以编写自定义的过渡控制逻辑
    console.log('视图过渡已触发', transitionInfo);
  }
}))

内容的提问来源于stack exchange，提问作者Otto Coster