Service:Angular 2 Route Mapping über JSON
export class ArticlesService {
private _url = 'https://example.firebaseio.com/.json';
constructor(private _http: Http) {
}
getAllArticles(): Observable<any> {
return this._http.get(this._url)
.map((response: Response) => response.json())
.catch((error) => Observable.throw(error));
}
getAnArticle(articleId: any): Observable<any> {
return this._http.get(this._url.replace(".json", articleId + ".json"))
.map((response: Response) => response.json())
.catch((error) => Observable.throw(error));
}
}
Komponente:
theArticle = {};
constructor(private _activatedRoute: ActivatedRoute, private _articlesService: ArticlesService, private _router: Router) {
this._router.events
.filter(theEvent => theEvent instanceof NavigationStart)
.subscribe((theEvent: NavigationStart) => {
if (/\/articles\/\d/.test(theEvent.url)) {
const urlDetails = theEvent.url.split('/');
const articleId = urlDetails[urlDetails.length - 1];
this.getArticleDetails(articleId);
console.log(this.theArticle);
}
});
}
ngOnInit() {
this.getArticleDetails(this._activatedRoute.snapshot.params['id']);
}
getArticleDetails(articleId: any) {
if (articleId != null) {
this._articlesService.getAnArticle(articleId - 1)
.subscribe(data => {
this.theArticle = data;
});
}
}
Router:
{ path: 'articles/:id', component: PArticlesComponent }
HTML:
(Navigation)
012.351.<ul class="sidebar-ul" *ngIf="allArticles.length">
<li *ngFor="let anArticle of limit(allArticles)">
<a [routerLink]="['/articles', anArticle.id]">{{anArticle.title}}
<br/>
<span class="date">{{formatDate(anArticle.createdOn)}}</span>
</a>
</li>
</ul>
(Artikel)
<div *ngIf="theArticle.id">
<h2 class="article-title">
<a href="#">{{theArticle.title}}</a>
</h2>
<div class="meta">
<p class="date">{{formatDate(theArticle.createdOn)}}</p>
</div>
<p [innerHTML]="theArticle.details"></p>
</div>
Erläuterung:
Die getAnArticle Funktion innerhalb des Artikelservice verwendet die: ID-Parameter eines ausgewählten Artikels und sendet diese Parameter an die getArticleDetails Funktion innerhalb der Komponente. Die Funktion "getArticleDetails" verwendet dann diesen Parameter, um den Inhalt dieses JSON-Objekts zu abonnieren. Diese Aufgabe sieht wie folgt aus:
{"id":"5","createdOn":1494721160,"title":"title 5","details":"details 5","shorthand":"shorthand-5"}
Beachten Sie, dass dies das fünfte Objekt in der JSON-Datei ist, so ist es Schlüssel-ID 4 ist, weshalb ich den Wert von 1 in der getArticleDetails Funktion bin subtrahiert wird.
Das alles funktioniert gut, und wenn ein Artikel das Router-Updates geklickt wird ordnungsgemäß eine URL wie http://www.example.com/articles/5 zu zeigen, aber ich bin eine echte harte Zeit, den Code zu modifizieren, so dass die URL statt http://www.example.com/articles/shorthand-5 anzeigt.
Ich kann den Router bekommen, um korrekte URLs zu haben, aber da ich gerade jetzt mit einer statischen Zahl arbeite und diesen Wert um 1 abziehe, um das korrekte JSON-Objekt zu erhalten, kann ich nicht herausfinden, wie man das richtige liest Daten (oder irgendwelche Daten für diese Angelegenheit), indem Sie den shorthand Parameter als den Bezeichner verwenden.