title: How do I get the route parameter out of ParamMap and assign it to a property
body: <p>I am running Angular 6 with RxJs 6.</p>
  
  <p>I am trying to get the value out of paramMap and assign it to a property.  The route looks like this:</p>
  
  <pre><code>{
      path: 'post/:postName',
      component: PostComponent
  }
  </code></pre>
  
  <p>The post component currently looks like this:</p>
  
  <pre><code>import { Component, OnInit, ViewEncapsulation } from '@angular/core';
  import { ActivatedRoute, ParamMap } from '@angular/router';
  import { switchMap } from 'rxjs/operators';
  import { Observable, of } from 'rxjs';
  import * as matter from 'yaml-front-matter';
  import { Post } from '../../models/post';
  
  @Component({
    selector: 'blog-post',
    templateUrl: './post.component.html',
    styleUrls: ['./post.component.css'],
    encapsulation: ViewEncapsulation.Emulated
  })
  export class PostComponent implements OnInit {
    created: Date;
    postName = '';
    markdown = '';
    title = '';
    loading = true;
    author = '';
  
    constructor(private route: ActivatedRoute) { }
  
    async ngOnInit () {
      this.route.paramMap.pipe(
        switchMap((params: ParamMap) =&gt;
          of(params.get('postName'))
        )
      ).subscribe(d =&gt; this.postName = d);
  
      const file = await fetch(`/_posts/${this.postName}.md`);
      const text = await file.text();
      const content = text.trim();
      this.parseFrontMatter(content);
    }
  
    parseFrontMatter (content: string) {
      const frontMatter: Post = matter.loadFront(content);
      this.title = frontMatter.title;
      this.author = frontMatter.author;
      this.created = frontMatter.created;
      this.markdown = frontMatter.__content;
      this.loading = false;
    }
  }
  </code></pre>
  
  <p>In the ngOnInit is the code for getting the value out of the paramMap.  This code works unless you try to route back to the post component with a different parameter.  </p>
  
  <p>This can be observed at <a href="https://devbin.io" rel="noreferrer">Devbin.io</a>.</p>
  
  <ol>
  <li>Navigate to the posts page</li>
  <li>Click on the only post</li>
  <li>Now try to navigate to the about page which is just another post.</li>
  <li>Notice that it will not route to the About page even though the Url is updated.</li>
  </ol>
  
  <p>The full source can be found on <a href="https://github.com/mike-morr/mike-morr.github.io" rel="noreferrer">GitHub</a></p>
  
  <p>All of the documentation and other Stack Overflow answers always assume you want to call a service in the switchMap function.  The official documentation is <a href="https://angular.io/guide/router#activated-route-in-action" rel="noreferrer">here</a></p>
  
  <p>My question is how do I get the route parameter and assign it to a property and keep navigation working while navigating back to the same route?</p>