Применение анимации к динамически загружаемому компоненту Angular 5

Question

Привет, пытаюсь применить анимацию к компоненту, в который я загружаю через ComponentFactory

Я пытался применить угловую анимацию к его внутреннему селектору и вызвать onInit

<p  [@detailExpand]="expand">
  {{ content1 }} {{ content2 }}
</p>

в загружаемом компоненте ts файл:

@Component({
  selector: 'app-rowdetail',
  templateUrl: './rowdetail.component.html',
  styleUrls: ['./rowdetail.component.scss'],
  animations: [
    trigger('detailExpand', [
      state('false', style({ 'height': '0px', 'minHeight': '0', 'visibility': 'hidden' })),
      state('true', style({ 'height': '*', 'visibility': 'visible' })),
      transition('expanded <=> collapsed', animate('1000ms')),
    ]),
  ]
})
export class RowdetailComponent implements OnInit, OnDestroy {
  @Input() content1: string;
  @Input() content2: string;
  @Input('expand') expand: string;
  constructor() { }

  ngOnInit() {
    this.expand = 'false'
    setTimeout(() => {
      this.expand = 'true'
      console.log(this.expand)
    }, 500)

  }
  ngOnDestroy() {
    this.expand = 'false'
    console.log(this.expand)
  }
}

Функция загрузки компонента:

 expandRow(index: number, row) {
    console.log(this.expandedRow, index)
    if (this.expandedRow != null) {
      // clear old message
      this.containers.toArray()[this.expandedRow].clear();
    }

    if (this.expandedRow === index) {
      this.expandedRow = null;
      return;
    } else {
      this.expandedRow = index
      this.expand = 'expanded'
      const container = this.containers.toArray()[index];
      const factory: ComponentFactory<RowdetailComponent> = this.resolver.resolveComponentFactory(RowdetailComponent);
      const messageComponent = container.createComponent(factory);

      messageComponent.instance.content1 = "some text";
      messageComponent.instance.content2 = "some more text";
    // setTimeout(() => {  //this.renderer.addClass(messageComponent.hostView.rootNodes[0].querySelector('p'), 'element-animation')
          // }, 1000)


    }
  }

Я также пытался применить класс с анимацией CSS, но ничего не получалось, анимация вообще не воспроизводилась У кого-нибудь есть идеи, что такое лучшая практика?

Answer 1

Ваш переход может быть проблемой:

transition('expanded <=> collapsed', animate('1000ms'))

Ваши состояния называются 'false' и 'true'. Вы должны определить переход на состояния, а не на то, что вы пытаетесь сделать.

trigger('detailExpand', [
  state('false', style({ 'height': '0px', 'minHeight': '0', 'visibility': 'hidden' })),
  state('true', style({ 'height': '*', 'visibility': 'visible' })),
  transition('true <=> false', animate('1000ms')),
]),

(хотя я не уверен, что это сработает из-за слов, которые вы использовали. Если это не так, попробуйте использовать 'A' и 'B' вместо true и false).