[英]Animate ng-container
I'm working on a bigger app, where we are using lazy loading for modules. 我正在开发一个更大的应用程序,在这里我们使用模块的延迟加载。 After we load a module, then in some cases a component get rendered to a <ng-container><ng-container>
. 加载模块后,在某些情况下,组件会呈现为<ng-container><ng-container>
。 The problem is, the animation which is defined on container is not getting called. 问题是,容器上定义的动画没有被调用。
I've created a dummy stackblitz example to demonstrate what I mean: link 我创建了一个虚拟的stackblitz示例来演示我的意思: 链接
app.component.html: app.component.html:
<ng-container *ngIf="visible" [@myAnimation]>
<hello [ngStyle]="{'top': '50px'}" name="not animated"></hello>
</ng-container>
<hello name="animated" [ngStyle]="{'top': '100px'}" *ngIf="visible" [@myAnimation]></hello>
<button (click)="toggle()">Toggle visibility</button>
app.component.ts: app.component.ts:
import { Component } from '@angular/core';
import {animate, style, transition, trigger} from '@angular/animations';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ],
animations: [
trigger("myAnimation", [
transition(":enter", [
style({opacity: 0 }),
animate(
"800ms",
style({
opacity: 1
})
),
]),
transition(":leave", [
style({opacity: 1 }),
animate(
"800ms",
style({
opacity: 0
})
),
]),
]),
]
})
export class AppComponent {
name = 'Angular';
visible = false;
toggle() {
this.visible = !this.visible;
}
}
hello.component.ts: hello.component.ts:
import { Component, Input } from '@angular/core';
@Component({
selector: 'hello',
template: `<h1>Hello {{name}}!</h1>`,
styles: [`h1 { font-family: Lato; }`]
})
export class HelloComponent {
@Input() name: string;
}
you should give [@myAnimation]
in hello component, otherwise it will not possible to grab the animation for hello component from ng-container
. 您应该在hello组件中输入[@myAnimation]
,否则将无法从ng-container
获取hello组件的动画。
<ng-container *ngIf="visible">
<hello [ngStyle]="{'top': '50px'}" name="not animated" [@myAnimation]></hello>
</ng-container>
Explanation: From Angular University 说明:来自Angular大学
ng-container directive provides us with an element that we can attach a structural directive to a section of the page, without having to create an extra element just for that. ng-container指令为我们提供了一个元素,我们可以将结构化指令附加到页面的某个部分,而不必为此专门创建额外的元素。
We can't use it giving any attribute or adding class, it is used to attach a structural directive. 我们不能使用它赋予任何属性或添加类,它用于附加结构指令。 it is documented in Angular 它记录在Angular中
The Angular is a grouping element that doesn't interfere with styles or layout because Angular doesn't put it in the DOM. Angular是一个分组元素,不会干扰样式或布局,因为Angular不会将其放在DOM中。
Live example: stackblitz 实时示例: stackblitz
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.