Angular技术问询：父组件访问子模块组件及路由跳转问题

Hey there! Let's walk through your Angular questions step by step, using the project setup you created with those CLI commands.

1. How to Navigate from an App Module Component to a Child Module Component's Route #

First, we need to wire up routing for your nav child module and connect it to the app's root routing system. Here's how:

Step 1: Add a Routing Module to the nav Module #

Run this CLI command to generate a routing module tied directly to your nav module:

ng g m nav/routing --flat --module=nav

Step 2: Configure Routes in the Child Module #

Open nav-routing.module.ts and define routes for your child components (like ProfileComponent and NavbarComponent):

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { ProfileComponent } from './components/profile/profile.component';
import { NavbarComponent } from './components/navrbar/navrbar.component';

const routes: Routes = [
  { path: 'profile', component: ProfileComponent },
  { path: 'navbar', component: NavbarComponent }
];

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

We use RouterModule.forChild() here because this is a child module—root modules always use forRoot() to initialize the router.

Step 3: Navigate from the App Module Component #

In your LoginComponent (part of the App Module), inject the Router service and use it to jump to the child module's route:

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

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent {
  constructor(private router: Router) { }

  // Example method to trigger navigation
  navigateToProfile() {
    this.router.navigate(['/profile']);
  }
}

Since you already imported NavModule into AppModule, the child routes will merge with the app's root routing system, so you can reference them directly by their path.

2. How to Navigate to the Profile Page After Clicking the Login Button #

We'll combine your AuthService, AuthGuard, and the Router to handle this authenticated flow:

Step 1: Implement Login Logic in AuthService #

Update auth.service.ts to track the user's authentication state:

import { Injectable } from '@angular/core';
import { Auth } from '../interfaces/auth';

@Injectable({
  providedIn: 'root'
})
export class AuthService {
  private isLoggedIn = false;

  login(credentials: Auth): boolean {
    // Replace this with your actual auth logic (e.g., API call)
    if (credentials.username && credentials.password) {
      this.isLoggedIn = true;
      localStorage.setItem('user', JSON.stringify(credentials));
      return true;
    }
    return false;
  }

  isAuthenticated(): boolean {
    return this.isLoggedIn || !!localStorage.getItem('user');
  }

  logout() {
    this.isLoggedIn = false;
    localStorage.removeItem('user');
  }
}

Step 2: Handle Login Button Click in LoginComponent #

Update login.component.ts to call the auth service and navigate on successful login:

import { Component } from '@angular/core';
import { AuthService } from '../../services/auth.service';
import { Router } from '@angular/router';
import { Auth } from '../../interfaces/auth';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent {
  credentials: Auth = { username: '', password: '' };

  constructor(private authService: AuthService, private router: Router) { }

  onLoginSubmit() {
    if (this.authService.login(this.credentials)) {
      // Navigate to profile only if login succeeds
      this.router.navigate(['/profile']);
    } else {
      alert('Invalid username or password!');
    }
  }
}

Add the login form to login.component.html:

<form (ngSubmit)="onLoginSubmit()">
  <input 
    type="text" 
    [(ngModel)]="credentials.username" 
    name="username" 
    placeholder="Username" 
    required
  >
  <input 
    type="password" 
    [(ngModel)]="credentials.password" 
    name="password" 
    placeholder="Password" 
    required
  >
  <button type="submit">Login</button>
</form>

Step 3: Protect the Profile Route with AuthGuard #

Update auth.guard.ts to restrict access to authenticated users only:

import { Injectable } from '@angular/core';
import { CanActivate, Router } from '@angular/router';
import { AuthService } from '../services/auth.service';

@Injectable({
  providedIn: 'root'
})
export class AuthGuard implements CanActivate {
  constructor(private authService: AuthService, private router: Router) { }

  canActivate(): boolean {
    if (this.authService.isAuthenticated()) {
      return true; // Allow access if user is logged in
    }
    // Redirect to login page if not authenticated
    this.router.navigate(['/login']);
    return false;
  }
}

Then update nav-routing.module.ts to apply the guard to the profile route:

const routes: Routes = [
  { path: 'profile', component: ProfileComponent, canActivate: [AuthGuard] },
  { path: 'navbar', component: NavbarComponent }
];

Don't forget to add the login route to app-routing.module.ts:

import { LoginComponent } from './components/login/login.component';

const routes: Routes = [
  { path: 'login', component: LoginComponent },
  { path: '', redirectTo: '/login', pathMatch: 'full' }
];

3. How to Access Child Module Components from a Parent Component #

There are two common approaches to this:

Option 1: Access via Routing #

This is the standard Angular SPA approach we covered in question 1—use the Router service to navigate to the child component's route. It keeps your app modular and follows Angular's best practices.

Option 2: Embed Child Components Directly in Parent Templates #

If you want to use a child module component directly in a parent component's template (like AppComponent), you need to export the child component from the nav module:

1. Update nav.module.ts to export the components you want to expose to parent modules:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { NavComponent } from './nav.component';
import { NavbarComponent } from './components/navrbar/navrbar.component';
import { ProfileComponent } from './components/profile/profile.component';
import { NavRoutingModule } from './routing/nav-routing.module';

@NgModule({
  declarations: [
    NavComponent,
    NavbarComponent,
    ProfileComponent
  ],
  imports: [
    CommonModule,
    NavRoutingModule
  ],
  exports: [
    NavbarComponent, // Export to make available to parent modules
    ProfileComponent
  ]
})
export class NavModule { }

2. Now you can use these components in any parent component template (e.g., app.component.html):

<app-navbar></app-navbar>
<app-profile></app-profile>

Only components listed in the child module's exports array are accessible to parent modules.

内容的提问来源于stack exchange，提问作者Manish Vashisth