Complete Guide to Page Navigation in Angular 6: From Basic Implementation to Advanced Applications

Angular Routing Basic Configuration

To implement page navigation in Angular applications, proper configuration of the routing module is essential. Routing configuration serves as the foundation of Angular application navigation, ensuring all components are correctly registered in their respective modules.

In the application module, we need to use the RouterModule.forRoot() method to register root-level routes:

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

const appRoutes: Routes = [
  { path: 'user', loadChildren: './user/user.module#UserModule' },
  { path: 'heroes', component: HeroListComponent },
];

@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    RouterModule.forRoot(appRoutes)
  ],
})

For child components in feature modules, the RouterModule.forChild() method should be used for registration. This hierarchical registration mechanism ensures clarity and maintainability of the routing structure.

Using the routerLink Directive

The routerLink directive provides a convenient way to perform navigation directly in templates. This directive supports both absolute and relative path matching, meeting various navigation requirements.

Basic usage is as follows:

<a [routerLink]="['/registration']">
  <button class="btn btn-success">Submit</button>
</a>

When generating links with dynamic parameters, an array of path segments can be passed:

<a [routerLink]="['/team', teamId, 'user', userName, {details: true}]">
  User Details
</a>

Different meanings of path prefixes:

• Starting with /: Search for routes starting from the application root path
• Starting with ./ or without slash: Search in child routes of the currently activated route
• Starting with ../: Search one level up in the route hierarchy

Programmatic Navigation with Router Class

In addition to the routerLink directive in templates, programmatic navigation can be implemented in component classes by injecting the Router service.

First, the Router service needs to be injected into the component:

import { Router } from '@angular/router';

export class LoginComponent {
  constructor(private router: Router) {}

  funLogin(mobilenumber) {
    this.router.navigateByUrl('registration');
  }
}

The Router class provides multiple navigation methods, with navigate() and navigateByUrl() being the most commonly used.

navigate() Method

The navigate() method performs navigation based on the provided command array, supporting relative paths and query parameters:

// Basic navigation
this.router.navigate(['/team/113/user/ganesh']);

// Navigation with query parameters
this.router.navigate(['/team/'], {
  queryParams: { userId: this.userId, userName: this.userName }
});

In the target component, passed parameters can be retrieved through the ActivatedRoute service:

import { ActivatedRoute } from '@angular/router';

export class TargetComponent {
  constructor(private route: ActivatedRoute) {
    this.route.queryParams.subscribe(params => {
      console.log('User ID:', params.userId);
      console.log('User Name:', params.userName);
    });
  }
}

navigateByUrl() Method

The navigateByUrl() method accepts a complete URL string for absolute path navigation:

this.router.navigateByUrl('/team/113/user/ganesh');

This method is similar to directly modifying the browser address bar, providing complete URL control capability.

Common Issues and Solutions

In actual development, common navigation issues include routing configuration errors and missing module imports. Ensuring the following points can avoid most problems:

• Confirm that target components are properly defined in the routing configuration
• Check if RouterModule has been correctly imported into the relevant module
• Verify that path spellings are correct, including case sensitivity
• Ensure navigation code executes in the correct context

Performance Optimization Considerations

Although Angular itself doesn't provide page caching mechanisms, user experience can be improved by caching data at the service layer. When users frequently navigate between pages, storing data in services can reduce repeated network requests and component initialization time.

Reference caching implementation approach: Cache HTTP call results in services to avoid reloading data during each page transition. While this cannot completely eliminate page rendering delays, it can significantly improve performance, especially when handling large amounts of data.

For complex applications, consider using RouteReuseStrategy to customize route reuse strategies for more granular performance optimization.