angular 使用ngIf的内容投影导致动画无法工作

q35jwt9p  于 2022-10-29  发布在  Angular
关注(0)|答案(8)|浏览(224)

我正在提交...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[X] Bug report  
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

当前行为

在具有ngIf的内容投影容器中嵌套组件会导致动画无法正确显示。

最大限度地减少了使用说明时问题的重现

以下面的使用案例为例:我有一个标签组件,它使用ng-content来填充内容。只有当激活的标签被聚焦时,内容才会被呈现,这是通过ngIf完成的。

选项卡组件

@Component({
  selector: 'tab',
  template: `
<ng-content *ngIf="active"></ng-content>
`
})
export class TabComponent {
   @Input() active: boolean = false;
}

选项卡组件

@Component({
  selector: 'tabs',
  template: `
<section>
<ul>
<li *ngFor="let tab of tabs" class="tab">
{{tab.title}}
</li>
</ul>
<div class="tab-content">
<ng-content></ng-content>
</div>
</section>
`
})
export class TabsComponent {
   @ContentChildren(TabComponent) tabs: QueryList<TabComponent>;
}

然后,我编写如下标记:

<tabs>
   <tab>Something<tab>
   <tab><component-with-animation></component-with-animation></tab>
</tabs>

当我点击第二个选项卡时,动画没有运行。我试过在组件中运行changeDetectionRef.markForCheck()来做动画,但似乎不起作用。如果我将ngIf更改为hidden,它可以正常工作。
经过调查,我发现具有动画的组件仍然在初始化,尽管它没有被渲染(参考:我尝试通过使用createEmbeddedView创建内容的主体并从选项卡阅读内容来解决此问题,如下所示:

@Component({
  selector: 'tab',
  template: `
<ng-template><ng-content></ng-content></ng-template>
`
})
export class TabComponent {
   @ViewChild(TemplateRef) templateRef;
}

并且在激活选项卡时,在我的父组件中创建如下视图:

@Component({
  selector: 'tabs',
  template: `
<section>
<ul>
<li *ngFor="let tab of tabs" class="tab">
{{tab.title}}
</li>
</ul>
<div class="tab-content" #tabContent></div>
</section>
`
})
export class TabsComponent {
   @ContentChildren(TabComponent) tabs: QueryList<TabComponent>;
   @ViewChild('tabContent', { read: ViewContainerRef }) tabContent:

   activate(tab) {
     this.tabContent.clear();
     this.tabContent.createEmbeddedView(tab.templateRef);
   }
}

但结果是一样的。
您可以在这个plunker http://plnkr.co/edit/2o4hyPhfMiFHLINIpT57?p=preview中看到一个更复杂的演示的结果。

环境

Angular 版本:4.3.0
浏览器:

  • Chrome(桌面)XX版
  • Chrome(安卓)XX版
  • Chrome(iOS)版本XX
  • Firefox版本XX
  • Safari(台式机)版本XX
  • Safari(iOS)第XX版
  • IE版本XX
  • Edge版本XX

对于工具问题:

  • 节点版本:8.x版本
  • 平台:Mac
aydmsdu9

aydmsdu91#

这里问题的另一个再现-https://plnkr.co/edit/GnYRzUTwwUBrdyeI9phK?p=preview
在这种情况下,重新排序集合组件会导致TemplateRefs根本不可见。
相关堆栈溢出问题-https://stackoverflow.com/questions/46813238/projected-templateref-items-removed-on-reorder

8hhllhi2

8hhllhi22#

好吧,我看到这里有什么东西坏了。我会调查的。

jdg4fx2g

jdg4fx2g3#

顺便说一句还是坏的。
另请参阅:angular/components#14530

im9ewurl

im9ewurl4#

@matsko@mgechev你能给我们一些最新的进展吗?

at0kjp5o

at0kjp5o5#

我不久前创建的问题可能是这个问题的副本。
#25914的最大值

dgenwo3n

dgenwo3n6#

刚和@matsko聊了聊。他说他今天在做这个。

qnyhuwrf

qnyhuwrf7#

@matsko@mgechev你能告诉我们最新的进展吗?:-)
预计到达时间?

2o7dmzc5

2o7dmzc58#

仍然在ng8中损坏。

相关问题