Как добавить анимацию к компоненту в Angular, где шаблон основан на ngTemplate - PullRequest
Новая
       5

Как добавить анимацию к компоненту в Angular, где шаблон основан на ngTemplate

0 голосов
/ 28 августа 2018

Шаблон для этого компонента выглядит так 

<ng-template #primary @fading><ng-content select="[primary]"></ng-content></ng-template> // gives error
<ng-template #secondary> <ng-content select="[secondary]"></ng-content></ng-template>


<ng-container *ngIf="(mode | async)=== mode_layout_100_0">
  <div class="h-100">
    <ng-container *ngTemplateOutlet="primary"></ng-container>
  </div>
</ng-container>
<ng-container *ngIf="(mode | async)=== mode_layout_0_100">
  <div class="h-100">
    <ng-container *ngTemplateOutlet="secondary"></ng-container>
  </div>
</ng-container>
<ng-container *ngIf="(mode | async)=== mode_layout_33_66">
  <div class="d-flex flex-row h-100 split-view" @fading> // dosent work 
    <div class="d-none d-sm-none d-md-none d-lg-block col-lg-4 p-0">
      <ng-container *ngTemplateOutlet="primary"></ng-container>
    </div>
    <div class="col-12 col-sm-12 col-md-12 col-lg-8 p-0 view-seperator">
      <ng-container *ngTemplateOutlet="secondary"></ng-container>
    </div>
  </div>
</ng-container>
<ng-container *ngIf="(mode | async)=== mode_layout_66_33">
  <div class="d-flex flex-row h-100 split-view">
    <div class="col-sm-8 p-0">
      <ng-container *ngTemplateOutlet="primary"></ng-container>
    </div>
    <div class="col-sm-4 p-0 view-seperator">
      <ng-container *ngTemplateOutlet="secondary"></ng-container>
    </div>
  </div>
</ng-container>

Он действует как менеджер, который разделяет представление в зависимости от того, что нам нужно: первичный или вторичный или их комбинация, а также от 33% до 66%.

Я добавил следующие метаданные в декоратор 

animations: [
    trigger('fading', [
      transition(':enter', animate('800ms ease-out')),
      transition(':leave', animate('800ms ease-in')),
    ])
  ]

То, чего я пытаюсь добиться, - это когда когда-либо вид меняется с режима с Первичного на вторичный в случае вложенного использования этого компонента. Должна быть плавная анимация легкости входа и выхода.

Как добавить тег animate, который я пытался добавить, к ng-template, он выдает ошибку, и если я добавляю к каждому div, это не работает.

1 Ответ

0 голосов
/ 18 января 2019

Насколько я знаю, это невозможно при использовании ng-template по крайней мере для Angular 6 (и 7). Эта угловая директива управляется им внутренне, поэтому я не нашел ничего путем тщательного поиска.

Что я использовал для преодоления этой ситуации, так это добавление переменной в код компонента и использование в разметке HTML компонента с условной директивой * ngIf , оценивающей это. Для случаев использования rxjs Observable , подпишитесь на него и затем измените значение loading на true . Только не забудьте правильно добавить анимацию в элементы HTML, которые вы хотите анимировать.

my.component.html 

<div *ngIf="loading" @animation>
...
</div>
<div *ngIf="!loading" @animation>
...
</div>

my.component.ts 

@Component({
  selector: 'app-component',
  templateUrl: './my.component.html',
  styleUrls: ['./my.component.css'],
  animations: [
    ...
  ]
})
export class MyComponent implements OnInit {
  loading: boolean = true;
  ...

  ngOnInit() {
    this.config$.subscribe(() => {
      this.loading = false;
    })
  }
}
...