angular 路由动画选择器在调用createComponent + attachView后立即停止工作,

nqwrtyyt 于 6个月前发布在 Angular

关注(0)|答案(3)|浏览(49)

哪个@angular/*包是bug的来源？

@angular/router@15.1.1及更早版本

这是个回归吗？

否

描述

如果在引导之前调用createComponent + attachView(例如，在预渲染应用程序上使某些组件保持良好的性能而不影响TTI),则路由动画会停止表现。
我注意到的事情：

无论router.navigate从哪里触发(是否已填充组件)都无关紧要
":leave"选择器完全停止工作，但：enter似乎仍然有效。
调用appRef.deattachView(hydratedComponentView),路由动画又开始工作了。

我已经创建了一个复现，您可以从environment.ts打开和关闭simulateHydration。
它是如何工作的：

SimulateHydration = false:有一个简单的路由滑动动画。
SimulateHydration = true:使用createComponent + attachView将头部组件附加。应用程序可以在任何时候通过点击窗口上的任意位置来引导，在此之后，您会发现在更改路由时，滑动动画不再起作用。如果您删除{可选：true},您只会在使用查询选择器不匹配任何离开元素的情况下注意到错误。

请提供一个链接，以便最小化地重现bug

https://stackblitz.com/edit/angular13-validation-cz7edf?file=src/environments/environment.ts

请提供您看到的异常或错误

Animation does not work / behaves differently

请提供您发现此bug的环境(运行`ng version`)

Angular 15.1.1.
Replicated on Stackblitz.

还有其他信息吗？

无响应*

Angular

来源：https://github.com/angular/angular/issues/48807

3条答案

按热度按时间

biswetbf1#

:enter 的正常工作和 :leave 的故障让我想起了 #48667 。

赞(0）回复(0）举报 6个月前

wfypjpf42#

:enter 的工作和 :leave 的损坏让我想起了 #48667 。
从我所了解的情况来看，当 SimulateHydration 为真时(即：它甚至不在 DOM 中，因此无法被选择),“离开”组件/路线根本不会渲染。

赞(0）回复(0）举报 6个月前

gudnpqoy3#

我制作了一个更简单的复现示例：
https://stackblitz.com/edit/angular13-validation-rtevdp?file=src/environments/environment.ts
如果我首先引导任何其他组件(除了AppComponent) - 这可以是一个没有模板/功能或依赖项的虚拟组件 - 在应用程序组件内部动画会中断。

ngDoBootstrap() {
      this.appRef.bootstrap(HeaderComponent);
      this.appRef.bootstrap(AppComponent);
 }

如果我首先引导AppComponent,它是好的：

ngDoBootstrap() {
      this.appRef.bootstrap(AppComponent);
      this.appRef.bootstrap(HeaderComponent);
  }

有任何可能的解决方法吗？

赞(0）回复(0）举报 6个月前

我来回答

angular 路由动画选择器在调用createComponent + attachView后立即停止工作,

哪个@angular/*包是bug的来源？

这是个回归吗？

描述

请提供一个链接，以便最小化地重现bug

请提供您看到的异常或错误

请提供您发现此bug的环境(运行`ng version`)

还有其他信息吗？

3条答案

相关问题

热门标签

最新问答

angular 路由动画选择器在调用createComponent + attachView后立即停止工作,

哪个@angular/*包是bug的来源？

这是个回归吗？

描述

请提供一个链接，以便最小化地重现bug

请提供您看到的异常或错误

请提供您发现此bug的环境(运行ng version)

还有其他信息吗？

3条答案

相关问题

热门标签

最新问答

请提供您发现此bug的环境(运行`ng version`)