我基本上是从父组件(专辑组件(路由到musicList组件。musicList组件获取存储在激活的路由器中的音乐数据，该路由器只是从解析器服务中解决它(尽管我尝试过直接调用它，但仍然存在相同的动画问题(。
使用*ngIf的模板在每次调用路由器上的各种id时添加和删除每个音乐数据，但只在加载页面或刷新页面时进行动画处理。为什么它会这样做？
<h2>My Album</h2>
<ul class="crisisAlbum">
<li *ngFor= "let crisisMusic of crisisAlbum" [class.selected]="crisisMusic === selectedCrisisMusic" (click)="onSelect(crisisMusic)"><a [routerLink]="['/crisis-center', crisisMusic.id]">
<span class="badge">{{crisisMusic.id}}</span>{{crisisMusic.music}}</a>
</li>
</ul>
<router-outlet ></router-outlet>
<app-message></app-message>它将我带到子组件(音乐列表组件(<Template>
<div class="g" @slide *ngIf="crisisMusic" >
<div >
<h2> {{crisisMusic.music | uppercase}} Details</h2>
<div><span>id: </span>{{crisisMusic.id}}</div>
<div >
<label>name:
<input [(ngModel)]="crisisMusic.music" #crisisSong placeholder="name" />
</label>
</div>
<button (click)="save(crisisSong)">Save</button>
<button (click)="back()">Back</button>
</div>
</div><Component>
import { Component, OnInit, Input } from '@angular/core';
import { Observable } from 'rxjs'
// import {music} from '../musicInterface'
// import { MusicService } from '../music.service';
import { crisis } from '../crisis'
import { ActivatedRoute, Router, Params } from '@angular/router';
import { switchMap, timeout, map } from 'rxjs/operators';
import { CrisisService } from '../crisis.service';
import { DialogService } from 'src/app/dialog.service';
import { trigger, query, state, style, transition, animate, stagger } from '@angular/animations';
@Component({
selector: 'app-music-list',
templateUrl: './music-list.component.html',
styleUrls: ['./music-list.component.css'],
animations: [
trigger('slide', [
transition(':enter', [
style({transform: 'translateX(100%)', opacity: 0, zIndex:100}),
animate('500ms')
]),
transition(':leave', [
style({transform: '*', opacity: '*', zIndex:100}),
animate('1000ms',style({transform:'translateX(100%)',zIndex:200, opacity:0}))
])
]
)]
})
export class crisisMusicListComponent implements OnInit {
@Input() animat: boolean;
show:boolean= false;
// @Input() crisisMusic:crisis
public crisisMusic: crisis;
private crisisId: number;
public crisisSong
constructor(private crisisMusicService: CrisisService, public dialogService: DialogService, private route: ActivatedRoute, private router: Router) {
}
isShow(){
console.log('yes')
this.show= !this.show
}
ngOnInit() {
this.route.data
.subscribe((data: { crisis: crisis }) => {
this.crisisId = data.crisis.id
this.crisisMusic = data.crisis;
this.crisisSong= data.crisis.music
console.log(data.crisis)
});
}
back() {
this.router.navigate(['../', { id: this.crisisId, foo: 'foo' }], { relativeTo: this.route })
}
save() {
this.crisisSong = this.crisisMusic.music;
console.log(this.crisisSong)
this.router.navigate(['../', { id: this.crisisId, foo: 'foo' }])
}
canDeactivate(): Observable<boolean> | boolean {
// Allow synchronous navigation (`true`) if no crisis or the crisis is unchanged
if (!this.crisisMusic || this.crisisMusic.music === this.crisisSong) {
return true;
}
// Otherwise ask the user with the dialog service and return its
// observable which resolves to true or false when the user decides
this.dialogService.confirm('Discard changes?').subscribe(d=>{
if(d){
this.save();
// this.router.navigate(['/crisis-center',this.route.snapshot.paramMap.get('id')])
}
});
}
}请注意，数据是从解析器服务中获取的。
我希望每次触发*ngIf时，元素都能在删除和添加新专辑时发挥作用。
此转换将在进入或离开时发生。这意味着在这种情况下，当ngIf中的条件发生变化时。由于它只能评估为true或false，因此只有当crisisMusic从未定义更改为已定义时，它才能更改，反之亦然。默认情况下，它是未定义的，当第一组数据通过路由到达时，它将被定义。这是动画唯一一次发生的地方。因此，您需要将ngIf或动画绑定到某个不同的条件，以真正检查是否刚刚添加或删除了该元素。
将动画放到路由上：
<router-outlet @slide></router-outlet>