app-routing.module.ts
import { NgModule } from '@angular/core';
import { PreloadAllModules, RouterModule, Routes } from '@angular/router';
import { BreadcrumbComponent } from './main-layout/breadcrumb/breadcrumb.component';
import { HeaderComponent } from './main-layout/header/header.component';
import { HomeComponent } from './main-layout/home/home.component';
import { SidenavComponent } from './main-layout/sidenav/sidenav.component';
import { AppInfoComponent } from './mobile-cms/app-info/app-info.component';
import { CreateAppComponent } from './mobile-cms/create-app/create-app.component';
import { CreateNewsComponent } from './mobile-cms/create-news/create-news.component';
import { EditAppComponent } from './mobile-cms/edit-app/edit-app.component';
import { EditNewsComponent } from './mobile-cms/edit-news/edit-news.component';
export const APP_ROUTES: Routes = [
{
path: '',
redirectTo: '/home/app-info',
pathMatch: 'full',
},
{ path: 'home', redirectTo: '/home/app-info', pathMatch: 'full' },
{
path: 'home', component: HomeComponent,
data: {
breadcrumb: 'Home'
},
children: [
{ path: 'create-app', component: CreateAppComponent,
data: {
breadcrumb: 'Create App'
},
},
{
path: 'app-info', component: AppInfoComponent,
data: {
breadcrumb: 'List App'
},
},
{
path: 'edit-app',
component: EditAppComponent,
children: [
{
path: 'create-news',
component: CreateNewsComponent,
data: {
breadcrumb: 'Create News'
}
},
{
path: 'edit-news',
component: EditNewsComponent,
data: {
breadcrumb: 'Edit News'
}
},
],
data: {
breadcrumb: 'Edit App',
},
}
]
}
];
@NgModule({
imports: [RouterModule.forRoot(APP_ROUTES,
{
preloadingStrategy: PreloadAllModules,
useHash: true
})],
exports: [RouterModule]
})
export class AppRoutingModule { }
I want to change routes to edit-news and create-news by using router.navigate()
edit-app.component.ts
import { Component, OnInit, AfterViewInit } from '@angular/core';
import { Router } from '@angular/router';
@Component({
selector: 'app-edit-app',
templateUrl: './edit-app.component.html',
styleUrls: ['./edit-app.component.scss'],
})
export class EditAppComponent implements OnInit, AfterViewInit {
constructor(private router: Router){
}
ngOnInit(): void {
}
ngAfterViewInit(): void {
}
editNewsById() {
this.router.navigate(['home/edit-app/edit-news'])}
addNews() {
this.router.navigate(['home/edit-app/create-news'])
}
}
However, when I click on the Add New button or edit icon, the URL in the address bar gets updated but the view does not update for creating news and editing news while remaining on the edit-app page only.