ブラウザーで製品タイトルを表示するにはhwo url use angular 4？

Question

いずれかplzは私を助けて... 現在、私は乳母車のIDで私の単一のブログを表示していますが、私は、URLでshow現在の視聴ブログのタイトルを必要と想定： http://localhost:4200/blogs/viewsingleblog/Exclusive-T-shirt-For-You

---

へ http://localhost:4200/blogs/viewsingleblog/1 ブログのJSONデータは次のとおりです。

blogs = [ 
     { 
      id: 2, 
      title: 'Exclusive T-shirt For You ..!', 
      discription:"Lorem ipsum ......", 
      postDate: '02-05-2017', 
      author: 'admin', 
      thambnils: '/src/app/images/t-shirt1.jpg', 
      public: true, 
      like: false 
     } 
] 

**app route is:** 
      { 
      path:'blogs', 
      children: [ 
       { 
       path: '', component:BlogComponent 
       }, 
       { 
       path: 'viewsingleblog/:title', 
       component: SingleblogComponent 
       } 
      ] 
     } 

ブログサービス

getBlog(title:any):Promise<Blog>{ 

    title= title.replace(new RegExp('-', 'gi'), '+'); 
// for replace blank space to "-" to show url 

    const singleBlog= `${this.url}/?${title}`; 
    console.log("Your Log Url => " + singleBlog); 
     return this.http.get(singleBlog) 
      .toPromise() 
      .then(response => response.json().data as Blog) 
      .catch(this.handleError) 
    } 
    private handleError(error: any): Promise<any>{ 
    console.log(error); 
    return Promise.reject(error.message || error); 
    } 

そして私の単一のブログのコンポーネントは次のとおりです。

import { Component, OnInit } from '@angular/core'; 
import { ActivatedRoute, Params , Router } from '@angular/router'; 
import { Location }     from '@angular/common'; 
import 'rxjs/add/operator/switchMap'; 

import { Blog } from '../../class/blog'; 
import { BlogService } from '../../service/blog.service'; 

@Component({ 
    selector: 'app-singleblog', 
    templateUrl: './singleblog.component.html', 
    styleUrls: ['./singleblog.component.css'] 
}) 
export class SingleblogComponent implements OnInit { 
    blog:Blog; 
    recentBlog:Blog[]; 
    constructor(
     private _blogService: BlogService, 
     private location: Location, 
     private route:ActivatedRoute, 
     private router: Router 
     ) { } 
    getBlog():void {  
     this.route.params 
     .switchMap((params: Params) => 
      this._blogService.getBlog(this.route.snapshot.params.title)) 
     .subscribe(blog => this.blog = blog); 
     console.log(this.blog); 
    } 

    getRecentBlogs():void { 
     this._blogService.getBlogs().then(recentBlog=> this.recentBlog = recentBlog); 
    } 
    ngOnInit() { 
     this.getBlog(); 
     this.getRecentBlogs(); 
    } 
    backnow() { this.location.back(); } 
    changeBlog(id:number){ this.router.navigate(['/viewsingleblog', id]); } 
} 

Answer 1

あなたが購読する必要があります。

title: string; 

    private sub: any; 

    constructor(private route: ActivatedRoute) {...} 

    ngOnInit() { 
    this.sub = this.route.params.subscribe(params => { 
     this.title = params['title']; 
    }); 
    } 

    ngOnDestroy() { 
    this.sub.unsubscribe(); 
    }