我正在提交...
[ ] 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
8条答案
按热度按时间aydmsdu91#
这里问题的另一个再现-https://plnkr.co/edit/GnYRzUTwwUBrdyeI9phK?p=preview。
在这种情况下,重新排序集合组件会导致
TemplateRefs
根本不可见。相关堆栈溢出问题-https://stackoverflow.com/questions/46813238/projected-templateref-items-removed-on-reorder
8hhllhi22#
好吧,我看到这里有什么东西坏了。我会调查的。
jdg4fx2g3#
顺便说一句还是坏的。
另请参阅:angular/components#14530
im9ewurl4#
@matsko@mgechev你能给我们一些最新的进展吗?
at0kjp5o5#
我不久前创建的问题可能是这个问题的副本。
#25914的最大值
dgenwo3n6#
刚和@matsko聊了聊。他说他今天在做这个。
qnyhuwrf7#
@matsko@mgechev你能告诉我们最新的进展吗?:-)
预计到达时间?
2o7dmzc58#
仍然在ng8中损坏。