The issue lies in the fact that the code provided below for the component
AppComponentremains constant across three different routes:/,/route2, and/route3.The problem arises as the properties
titleandbodyHTMLof theAppComponentdo not update with values corresponding to the selected routes.What specific modifications are required in the code snippet below to ensure that unique values for
titleandbodyHTMLare displayed when each route is accessed by the user?Outlined are the steps to recreate the issue on any computer within a few minutes:
Establish the Initial App:
To begin, I initialized a base application using Angular-CLI following these instructions:
cd C:\projects\angular-cli
ng new routes-share-component
cd C:\projects\angular-cli\routes-share-component
ng serve
Modify Only 4 Files:
Subsequently, alterations were made solely to 4 files as detailed below:
I introduced app.routing.ts containing the subsequent content:
import { Routes, RouterModule } from '@angular/router';
import { AppComponent } from './app.component';
const appRoutes: Routes = [
{ path: '', component: AppComponent },
{ path: 'route2', component: AppComponent },
{ path: 'route3', component: AppComponent }
];
export const routing = RouterModule.forRoot(appRoutes);
The file app.componenet.ts was then adjusted to reflect the following changes:
import { Component, OnInit, OnChanges } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { Router } from '@angular/router';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit, OnChanges {
title = 'This is the default title!';
bodyHTML = 'Default text goes here.'
constructor(private _router:Router, private route:ActivatedRoute) {
console.log('Inside the constructor!');
console.log(route.url);
console.log(_router.url);
}
// Additional code present in original text
}
Furthermore, app.component.html was simplified to the subsequent format:
<div style="text-align:left">
<h1>{{title}}</h1>
<p>{{bodyHTML}}</p>
</div>
Lastly, app.module.ts assumed the configuration shown below, encompassing inclusion of app.routing.ts:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { routing } from './app.routing';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule, routing
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Note that while the ngOnInit() block functions without errors, the ngOnChanges() block does not. This results in the title always being set to Home Page Title regardless of the chosen route.
What precise modifications should be implemented in the given code to exhibit distinct values for title and bodyHTML per route selection?
@BeetleJuice's recommendations:
Pursuant to the recommendations made by @BeetleJuice, an updated version of AppComponent was attempted. However, compilation issues arose at lines denoting routerSub:Subscription and
this.routerSub = this.router.events.filter(....)import { Component, OnInit, OnChanges } from '@angular/core';
import { NavigationEnd, Router, ActivatedRoute } from '@angular/router';
import { Subscription } from 'rxjs/Subscription';
import 'rxjs/add/operator/filter';
import 'rxjs/add/operator/map';
// Additional code present in original text
}
What further adjustments are necessary for successful operation?