Btukfyl

I created a new Angular 7 app using the Angular CLI. I left the configuration/setup the default and started adding my code on-top of it. The AppComponent makes a service call to fetch some blog posts and pass them to a child component that renders them.

app.component.html

<div class="container">

  <header class="header-site">

    <p class="site-title">Sully<p>

    <p class="site-tagline">Code-monkey</p>

    <p class="site-description">A sotware development blog with a touch of tech and a dash of life.</p>

  </header>



  <div *ngFor='let post of posts'>

    <app-blog-post [post]="post"></app-blog-post>

  </div>

</div>



<router-outlet></router-outlet>

app.component.ts

@Component({selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css']})

export class AppComponent {

  posts: Post;



  constructor(private blogService: BlogService) {}



  async ngOnInit() {

    await this.loadPosts();

  }



  async loadPosts() {

    this.posts = await this.blogService.getPosts();

  }

}

This loads the first 10 posts and renders them with my app-blog-post child component.

blog-post-component.html

<article>

  <header>

    <h1 class="post-title"><a [routerLink]="['/blog', post.path]">{{post.title}}</a></h1>

    <h4 class="post-details">{{post.details}}</h4>

  </header>

  <div>

    <markdown ngPreserveWhitespaces [data]="post.content">

    </markdown>

  </div>

</article>

blog-post-component.ts

@Component({

  selector: 'app-blog-post',

  templateUrl: './blog-post.component.html',

  styleUrls: ['./blog-post.component.css']

})

export class BlogPostComponent implements OnInit {



  @Input() post: Post;

}

What happens is that it renders the first 10 blog posts as expected. Now, in the app-routing.module.ts class, I've added /blog/:id as a route, which my child component routes to when you click the post title.

const routes: Routes = [

  {

    path: 'blog/:id',

    component: BlogPostComponent

  }

];

I don't understand the routing mechanics here. When I navigate to the post, via the router, nothing happens. I see the URL path change in the browsers URL bar, but the content doesn't change.

What I'm trying to do is replace the 10 posts in the current view with the single post that's already been fetched as the only post on the page, when I hit that specific route. I've read through the docs but can't tell how to replace the content already in the view, with a subset of that content using the component already created. I'm not sure if I have to move the rendering of 10 posts off to a unique route, and just keep the router-outlet as the only element in the app.component.html, and for the '/' route, route to the component containing the top 10 posts. I'm worried that makes sharing the post data I've already fetched, between sibling components, more difficult as the parent now has to push/pull between the two children. Is that a backwards way of handling it?

Further still, each blog post has a unique route. I'm porting my blog from an existing hosted service where the path to a post is /blog/year/month/day/title. Can my Routes object be as simple as /blog/:year/:month/:day/:title? Since I can't get the routing working, I'm unable to test the routing itself and see if that's doable. I want to keep the same routing so existing bookmarks and search engine result links aren't broken.

When you utilise the routing mechanism, the specified component gets rendered in the appropriate router-outlet. I suspect that what you see when you navigate to a route, is the selected post rendered at the very bottom of the page.

As you allude to, if you would like to render the list of default blog posts, you will need to create a separate route/component for it, letting the router-outlet render it for you.

The way the routing works, is by going through each entry in your routes list and checking the current path for a match. This means the order is important. If you want to track both /blog/:year/:month/:day/:title and blog/:id, you will want to order them most specific first. And if you want an empty URL to point to a landing page, as you have above you could put something like { path: '', pathMatch: 'full', [component/redirectTo] } at the bottom of your route list.