Angular 5动画问题

Question

我是角动画新手，目前正在关注Angular指南＆＃34;进入和退出＆＃34;一部分。

目前我有类似的东西

<section
  class="row justify-content-center mb-2 mb-md-4"
  *ngFor="let site of sites"
  [@flyInOut]="site.state"
>

...repeatable content

</section>

和组件

import { Component, OnInit } from '@angular/core';
import { SiteService } from '../../Services/site.service';
import { Site } from './site';
import {
  trigger,
  state,
  style,
  animate,
  transition
} from '@angular/animations';

declare const $;

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss'],
  providers: [SiteService ],
  animations: [
    trigger('flyInOut', [
      state('in', style({transform: 'translateX(0)'})),
      transition('void => *', [
        style({transform: 'translateX(-100%)'}),
        animate(100)
      ]),
      transition('* => void', [
        animate(100, style({transform: 'translateX(100%)'}))
      ])
    ])
  ]
})
export class HomeComponent implements OnInit {
  sites: Site[] = [];

  constructor(
    siteService: SiteService,
    public name: string,
    public state: string = 'in'
  ) {
    this.sites = siteService.getSites();
  }

  ngOnInit(): void {
    $(function () {
      $('[data-toggle="tooltip"]').tooltip();
    });
  }

}

动画模块导入主模块。

网站加载时会抛出错误

Answer 1

问题是你的构造函数中有string，如你所知，Angular组件的构造函数中的参数被注入或提供，称为依赖注入。目前，您的构造函数中似乎没有字符串的提供程序。 您有两种方法：

1. 您需要使用@Inject()装饰器为构造函数参数提供字符串的值，如下所示：

   constructor(siteService: SiteService, @Inject(HOME_COMPONENT_NAME) name, ...)
   

   其中HOME_COMPONENT_NAME是InjectionToken。

2. 在provide(string, {useValue: ...})装饰器中使用@Component()为字符串提供值，如下所示：

   @Component({
       providers: [SiteService, provide(string, {useValue: 'your_string_here'})]
   })
   export class HomeComponent {
   

   'your_string_here'是字符串的值。

我建议您详细了解Dependency Injection in Angular，并参考此issue。