如何使用angular 4在浏览器url中显示产品标题？

目前我正在用婴儿车id显示我的单个博客，但我需要在url中显示当前查看博客标题假设： 至

---

博客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
              }
            ]
        }

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]); }
}

博客服务

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);
  }

---

你需要订阅

 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();
  }

---

你需要订阅

 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();
  }

---

感谢您的评论，但此代码不起作用，我需要浏览器URL中的特定标题谢谢您的评论，但此代码不起作用，我需要浏览器URL中的特定标题您找到任何解决方案了吗？我没有找到此解决方案了吗？您找到了任何解决方案了吗？我没有找到此解决方案