Question

我做了一个角度项目。我想在按钮单击事件中播放小的mp3文件，当用户从UI单击各种按钮时，应该根据所选按钮播放音乐。我想预加载所有mp3格式的音乐文件，只有以角度加载mp3文件后，才可以在屏幕上看到我的UI。我该怎么办？

预先感谢

Answer 1

Angular 8路由器提供了resolve属性，该属性带有路由解析器，并允许您的应用程序在导航到路由之前获取数据（即解析路由数据）。您可以通过实现Resolve接口来创建路由解析器。例如：

audio-resolver.service.ts：

  import { Injectable } from '@angular/core';
  import { Resolve } from '@angular/router';

  @Injectable()
  export class AudioResolver implements Resolve<Promise<string[]>>{

    audioFiles = [
      "http://www.teanglann.ie/CanC/nua.mp3",
      "http://www.teanglann.ie/CanC/ag.mp3",
      "http://www.teanglann.ie/CanC/dul.mp3",
      "http://www.teanglann.ie/CanC/freisin.mp3"
    ];

    resolve = (): Promise<string[]> => Promise.all(this.audioFiles.map(this.preloadAudio))

    preloadAudio = (url: string): Promise<string> => {
      const audio = new Audio();
      audio.src = url;
      return new Promise((res, req) => audio.addEventListener('canplaythrough', () => res(url), false))
      // once file is loaded, the promise will be resolved
      // the file will be kept by the browser as cache
    }
  }

如您所见，实现Angular路由器的Resolve接口的唯一要求是我们的类必须具有resolve方法。从该方法返回的所有内容都是已解析的数据，在我们的示例中，返回的值为Promise<string[]>，它将解析为urls-array。

现在，您可以设置我们的路由模块以包括我们的解析器：

app.routing.module.ts：

  import { NgModule } from '@angular/core';
  import { Routes, RouterModule } from '@angular/router';
  import { PlayerComponent } from './components/player/player.component';
  import { AudioResolver} from './services/audio-resolver.service';

  const routes: Routes = [
    { path: "", component: PlayerComponent, resolve: { songs: ResolverService } }
  ];

  @NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule],
    providers: [AudioResolver]
  })
  export class AppRoutingModule { }

在组件中，我们可以使用ActivatedRoute的快照对象的data属性访问已解析的数据。

player.component.ts：

  import { Component, OnInit } from '@angular/core';
  import { ActivatedRoute } from '@angular/router';

  @Component({
    selector: 'app-player',
    templateUrl: './player.component.html',
    styleUrls: ['./player.component.scss']
  })
  export class PlayerComponent implements OnInit {
    songs: string[];

    constructor(private route: ActivatedRoute) { }

    ngOnInit() {
        this.songs = this.route.snapshot.data.songs;
    }
  }

player.component.html：

<audio *ngFor="let src of songs" [src]="src" controls="" ><br></audio>

现在，如果您继续浏览浏览器网络，您会看到文件在PlayerComponent初始化之前就已加载，并且再也不会加载。

如何在角度项目中预加载音频文件？

1 个答案: