Question

点击登录后如何导航到个人资料页面：任何人都可以解释如何从父组件访问子模块组件。对不起，我正在下面的代码，让你了解我的工作方式

这就是我生成项目的方式： -

ng new angular
cd angular
ng g c components/login
ng g m nav -m=app.module
ng g c nav
ng g c nav/components/navrbar
ng g c nav/components/profile
ng g s services/auth
ng g i interfaces/auth
ng g g guards/auth

这是我的项目结构： -

Folder> components> Folder(login component)
Folder> guards
Folder> interfaces
Folder> nav> nav component + nav module + Folder(Components> Navbar and Profile)
Folder> Service

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HttpClientModule } from '@angular/common/http';
import { FormsModule }   from '@angular/forms';

import { AppComponent } from './app.component';
import { LoginComponent } from './components/login/login.component';
import { NavModule } from './nav/nav.module';


const appRoutes: Routes = [
  { path: 'login', component: LoginComponent },
  { path: 'nav', loadChildren: 'app/nav/nav.module#NavModule'},
  { path: '',
    redirectTo: '/login',
    pathMatch: 'full'
  },
  { path: '**', component: LoginComponent }
];

@NgModule({
  declarations: [
    AppComponent,
    LoginComponent
  ],
  imports: [
    RouterModule.forRoot(
      appRoutes,
      { enableTracing: true } // <-- debugging purposes only
    ),
    // other imports here
    BrowserModule,
    NavModule,
    // import HttpClientModule after BrowserModule.
    HttpClientModule,
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

nav.module.ts

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


import { NavComponent } from './nav.component';
import { NavbarComponent } from './components/navbar/navbar.component';
import { ProfileComponent } from './components/profile/profile.component';
import { AuthService } from '../services/auth.service';
import { AuthGuard } from '../guards/auth.guard';


const navRoutes: Routes = [
  { path: '',
  component: NavComponent ,
  children: [
    {
        path: 'profile',
        component: ProfileComponent
    }
]
  }
];
@NgModule({
  imports: [
    RouterModule.forChild(
      navRoutes // <-- debugging purposes only
    ),
    // other imports here
    CommonModule
  ],
  providers: [  AuthService, AuthGuard],
  declarations: [NavComponent, NavbarComponent, ProfileComponent]
})
export class NavModule { }

login.components.ts

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


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

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

  ngOnInit() {
    const token = localStorage.getItem('token');
    this.router.navigate(['/profile']);        
  }
  email : any;
  password : any;
  onSubmit(){
    let loginData = {
      email : this.email,
      password : this.password
    };
    this.authService.loginConfig(loginData)
    .subscribe((data:any) => {
        if(!data || data.status==200){
          console.log("response login data==>",data)
          this.authService.storeUserData(data.token, data);
          this.router.navigate(['/profile']);
        } else{
          alert(data.message)
        }
      });
    }
}

app.component.html

<app-login></app-login>

nav.component.html

<app-navbar></app-navbar>
<router-outlet></router-outlet>
<!-- Routed views go here -->

因为我不确定如何从登录到个人资料到达。

Answer 1

更好的做法是创建＆＃34; RoutingModule＆＃34;对于每个模块，您可以将路由和模块/组件/提供商依赖性分开。

但现在让我们在您的代码上执行此操作。为了导航到位于NavModule中的配置文件组件，您必须在您的案例中定义AppModule中的路径，该路径指向NavModule。

因此AppModule中的路由应如下所示：

const appRoutes: Routes = [
  { path: 'login', component: LoginComponent },
  { path: 'profile', loadChildren: './nav/nav.module#NavModule'
  { path: '',
    redirectTo: '/login',
    pathMatch: 'full'
  },
  { path: '**', component: LoginComponent }
];

我们已经定义，当网址匹配＆＃34; profile＆＃34;时，它会检查NavModule中的路由。因此，我们还必须在NavModule中定义路由。由于您已经为配置文件定义了路径，因此我们只需要在此处稍作更改。不必将路径指向＆＃34; profile＆＃34;，而是必须将其指向根＆＃34;＆＃34;。因为否则只有在访问/ profile / profile时才会匹配它。因此，您在NavModule中的路线应如下所示：

const appRoutes: Routes = [
  { path: '',
    component: ProfileComponent ,
    canActivate:[AuthGuard]}
];

从App Module Components导航到子模块组件路径

1 个答案: