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）。

将动画应用于动态加载的组件Angular 5

1 个答案: