Question

我目前正在使用节点/快速服务器以及角度4和ng build --watch --output-path我的项目，以便更轻松地使用我创建的端点。

截至目前，我正在使用spotify web api通过按几个html按钮来控制我的音乐。最初，我使用Angular中的HttpClient模块进行get调用以及观察。但是根据我的理解，.subscribe()并不能很好地处理非JSON数据（我对Angular和编程一般都是新手，因此我可能会误解某些内容）。我通过以下代码自己测试了这个：

在我的 music-control.component.html：

中

<button (click)="pause($event)">Pause</button>

在我的 music-control.component.ts：

中

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
    selector: 'app-music-control',
    templateUrl: './music-control.component.html',
    styleUrls: ['./music-control.component.css']
})
export class MusicControlComponent implements OnInit {

    constructor(private http: HttpClient) { }

    ngOnInit() {
    }

    pause() {
        this.http.get('/pause').subscribe();
    }

}

仅供参考：我的服务器端代码工作正常并且已经建立了端点网址/pause。我已经测试了localhost:8000/pause，端点确实暂停了我的Spotify歌曲。

然而，当使用subscribe()方法时，我可以暂停一首歌，但之后播放然后再次暂停，端点会返回错误（错误状态：500，＆＃39;内部服务器错误＆＃ 39。）

或者，我删除了在pause()文件中创建的music-control.component.ts函数，而是使用了<button><a href="/pause">Pause</a></button>，它运行顺利。

但是，我的目标是按暂停/播放按钮并保存曲目数据（例如歌曲的时间戳或歌曲曲目ID）并将其保存到我创建的postgreSQL表中，然后暂停该歌曲。所以我真的需要在component.ts文件中使用类似promise的函数，因为href解决方案将不可行。

Angular RouteModule是否有办法转到外部URL（基本上复制href在component.ts文件中的作用）？或者我能用subscribe()解决方案实现这一目标吗？

道歉，如果这个问题很冗长......谢谢！

Answer 1

您可以使用路由器模块以下方法：

对于相对网址

navigate(commands: any[], extras: NavigationExtras = { skipLocationChange: false }): Promise<boolean>

对于绝对网址

navigateByUrl(url: string | UrlTree, extras: NavigationExtras = { skipLocationChange: false }): Promise<boolean>

在您的情况下，您可以使用this.router.navigate('/pause');

假设您在构造函数中注入了来自Router服务的路由器变量。

 constructor(private router: Router, private http: HttpClient) {}

有关详细信息，请转到this link

Answer 2

虽然这可能不是我问的问题的直接解决方案，但我已经解决了我所面临的问题。我认为我可以调用端点的唯一方法是使用subscribe() observable，所以我继续在我的music-control.compononent.ts中使用它。相反，我转到我的服务器端代码并添加res.json(null)来解析它到我的角度客户端。通过这样做，这使我能够将非JSON对象（这是我从Spotify获得的响应）转换为JSON并发送允许订阅者很好地观察它的内容。

这是我的服务器端代码：

app.get('/pause', function(req, res) {
    client.get('access_token', (err, data) => {
        axios({
            method: 'PUT',
            url: `https://api.spotify.com/v1/me/player/pause`,
            headers: { Authorization: "Bearer " + data }
        }).then(function (response) {
            console.log("song is paused!");
            res.json(null);
        }).catch((err) => console.log("uh-oh! song is unable to pause", err))
    })
})

如何在Angular 4中导航到组件内部的外部URL？

2 个答案: