我需要从Observable对象中获取一些数据,以便在SEO中使用(更改元 Headers && description) .
我通过HTTP从API获取数据 . 数据在Observable对象中获得 .
我通过订阅this.radio $以某种方式成功转换Observable对象,但这会导致函数getRadioData(slug:string)的双重请求 .
可能我需要将Observable对象转换为Array .
radio-details.component.ts (这里我想获得SEO的meta_title && meta_description变量)
import { Component, OnInit } from '@angular/core';
import { RadioDetails, RadioService } from './../services/radio.service';
import { Router, ActivatedRoute, ParamMap } from '@angular/router';
import { Observable } from 'rxjs/Observable';
@Component({
selector: 'app-radio-details',
templateUrl: './radio-details.component.html',
styleUrls: ['./radio-details.component.css'],
providers: [RadioService]
})
export class RadioDetailsComponent implements OnInit {
radio$: Observable<RadioDetails[]>;
constructor(
private route: ActivatedRoute,
private router: Router,
private service: RadioService
) { }
ngOnInit() {
this.route.paramMap
.switchMap((params: ParamMap) =>
this.service.getRadioData(params.get('slug'))
)
.subscribe(
(data) => {
this.radio$ = data;
console.log("this.radio$ IS: ", this.radio$)
// HERE I WANT TO get meta_title && meta_description variables for SEO
// this.radio$ looks like: Object { _isScalar: false, source: Object, operator: Object }
}
);
}
}
radio.service.ts
import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';
export class Categories{
constructor(
public title: string,
public items: Radio[]
){}
}
export class Radio{
constructor(
public title: string,
public slug: string,
public external_url?: string,
public isplay?: string,
public css_class?: string
){}
}
export class RadioDetails{
constructor(
public title: string,
public player_type?: string,
public stream?: string,
public meta_title?: string,
public meta_description?: string
){}
}
@Injectable()
export class RadioService {
constructor(private _http: Http) { }
getAllRadiosData(){
return this._http.get('http://api.2net.co.il/radio/stations/all_stations.php')
.map(res => res.json())
}
getRadioData(slug: string){
if (slug !== null && typeof slug !== 'undefined' && slug){
return [
this._http.get('http://api.2net.co.il/radio/stations/station.php?slug='+slug)
.map(res => res.json())
];
}
}
}
radio-details.component.html
<article class="page page-radio-detail">
<div *ngIf="radio$ | async as radio; else noRadioFound">
<div class="playerZone">
<header class="entry-header">
<h1 class="entry-title">
<span class="text">
Playing now:
</span>
<span class="radio_title">{{ radio.title }}</span>
</h1>
</header>
<div class="player-wrapper">
<app-radio-player stream="{{radio.stream}}" player_type="{{radio.player_type}}"></app-radio-player>
</div>
</div>
</div><!-- /ngIf -->
<ng-template #noRadioFound>
<div class="playerZone noRadioFound">
<header class="entry-header">
<h1 class="entry-title">
<span class="text">
Select radio station:
</span>
</h1>
</header>
<div class="player-wrapper">
click on links below:
</div>
</div>
</ng-template>
<div class="entry-content">
<app-radio-categories></app-radio-categories>
</div>
</article>
1 回答
在你们帮助我之后,解决方案是:
1.在 radio.service.ts 中,无需在函数 getRadioData(slug: string) 中返回数组 . 正确的功能代码必须是:
{mate_description: "some meta description", meta_title: "some_meta_title", stream: "http://example.com"}