[RESOLVED] Angular - Routing

[techgnome]

So I'm trying to pick up Angular...so far so good. I've worked through the online Heroes tutorial, which was a great help in getting the basics down. Now I'm trying to apply those to a project - rebuilding a website that's been dead/dormant for some years. Things were going fine until I tried to integrate some basic (at least to me) routing. I've got some views that are 90% static HTML... some news and notices, things that'll never change. Since it seemed like over kill to create a component for each of the pages I wanted to display, I created one default component (DefaultComponent) and then added a route.

app-routing.module.ts

import { NgModule }             from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

import { DefaultComponent } from './default/default.component';
import { ArtistsComponent } from './artists/artists.component';

const routes: Routes = [
  { path: '', component: DefaultComponent },
  { path: 'site/:view', component: DefaultComponent },
  { path: 'artists', component: ArtistsComponent }
];

@NgModule({
  imports: [ RouterModule.forRoot(routes) ],
  exports: [ RouterModule ]
})
export class AppRoutingModule {}

default.component.ts

import { Component, OnInit } from '@angular/core';
import { MessageService } from '../message.service';
import { ActivatedRoute } from '@angular/router';
import { Location } from '@angular/common';

import {AlbumBlocksComponent} from '../album-blocks/album-blocks.component';

@Component({
  selector: 'app-default',
  templateUrl: './default.component.html',
  styleUrls: ['./default.component.css']
})
export class DefaultComponent implements OnInit {

  News = false;
  Disclaimer = false;
  About = false;
  FAQ = false;

  constructor(
    private messageService: MessageService,
    private route: ActivatedRoute,
    private location: Location
  ) {}

  ngOnInit() {
    this.messageService.add('Default component initialized');

    this.News = false;
    this.Disclaimer = false;
    this.About = false;
    this.FAQ = false;

    var currentView = this.route.snapshot.paramMap.get('view');
    
    if (currentView != null) { currentView = currentView.toLowerCase();}
    switch (currentView) {
      case 'news': this.News = true; break;
      case 'disclaimer': this.Disclaimer = true; break;
      case 'about': this.About = true; break;
      case 'faq': this.FAQ = true; break;
      default: this.News = true; break;
    }

    this.messageService.add('currentView:' + currentView);

  }

}

In the default.component.html file, I then have the appropriate *ngIf conditions to display the four sections based on the route as appropriate.
The idea is that if the site is hit at root, it will display the news (it does), if I then go to /site/disclaimer it displays the disclaimer section, and if I go to /site/faq it displays the FAQ section and so on.

I have another component for the left column where the navigation is displayed.

left-col.component.html

<!-- begin left column -->
<div class="sub_nav"> <h3>Main Menu</h3>
  <p>
    &raquo;&nbsp;<a routerLink="/">Home</a><br />
    &raquo;&nbsp;<a routerLink="/site/faq">FAQ &amp; Other Questions</a><br />
    &raquo;&nbsp;<a routerLink="/site/about">About ARSSE-Radio</a><br />
    &raquo;&nbsp;<a routerLink="/contact">Contact Us</a><br />
  </p>
  <hr />
  <br clear="all" />
</div>
<br clear="all" />
<!-- end left column -->

When I hit the main page initially, I get the news, as I expect. When I then click the FAQ or About link, it navigates to that section, as expected. Where it then seems to break is if I then click on one of the other /site/* links.... so if I'm in the FAQ and click the About, I see the URL change, but the page doesn't.

I know I could just create a component for each of the views and create static routes for each one, instead of the dynamic one I have currently, but as I mentioned, that feels like overkill & cheating. Surely there's a way to make this work.

In some of the examples I've seen online, they used an Observable which is then subscribed to, but in those cases, they were also looking for data changes and getting data from a service. This is just static text for the most part. Do I still need to create an Observable and subscribe to it? Or is there something I haven't come across yet?


-tg

[techgnome]

Turns out, I just needed the right event to listen to. I found the answer here: https://medium.com/engineering-on-th...5-1a1bfc740ab2
After subscribing to the NavigationEnd event of the route, clicking through the works just like it's supposed to. woo hoo!

-tg