在重置密码功能的外部链接中找不到角度组件

Question

这里是新手。我正试图为一个javaspringboot应用程序编写一个重置密码功能。正面与Angular 7配合使用。

用户输入电子邮件并单击重置按钮。然后，一个令牌被存储在用户表中，用户收到一封带有如下链接的邮件：

http://localhost:4200/reset-password?token=7f278bf1-40c7-4b1a-bde5-76744b866241

当我点击这个链接时，我有一个404错误。该应用程序似乎找不到ResetPasswordForm组件。

重置模块密码.ts:

import { ResetPasswordFormComponent } from './reset-password-form.component';
import { Routes, RouterModule } from '@angular/router';
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MaterialModule } from '../material/material.module';
import { ClassementModule } from '../classement/classement.module';
import { HttpClientModule } from '@angular/common/http';
const routes: Routes = [
{ path: 'reset-password', component: ResetPasswordFormComponent }
// { path: '', component: HomeComponent }
];
@NgModule({
declarations: [ResetPasswordFormComponent],
imports: [
CommonModule,
MaterialModule,
ClassementModule,
HttpClientModule,
RouterModule.forChild(routes)
]
})
export class ResetPasswordModule { }

app-routing.module.ts:

...
import { ResetPasswordFormComponent } from './site/reset-password-form/reset-password-form.component';
...
{ path: 'reset-password', component: ResetPasswordFormComponent}
...
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }

app.module.ts

...
import { ResetPasswordModule } from './site/reset-password-form/reset-password-form.module';
...
@NgModule({
declarations: [
AppComponent,
ConfirmDialogComponent,
UserComponent,
AlertComponent,
],
imports: [
...
ResetPasswordModule
],
providers: [httpInterceptorProviders, {provide: LOCALE_ID, useValue: "fr-FR", }, DatePipe],
entryComponents: [ConfirmDialogComponent, AlertComponent],
bootstrap: [AppComponent]
})
export class AppModule { }

重置组件的密码.ts

import { Component, OnInit } from '@angular/core';
import { AuthService } from '../auth/auth.service';
@Component({
selector: 'app-reset-password-form',
templateUrl: './reset-password-form.component.html',
styleUrls: ['./reset-password-form.component.scss']
})
export class ResetPasswordFormComponent implements OnInit {
constructor(private authService: AuthService) { }
ngOnInit() {
if(this.authService.isLoggedIn) {
console.log("logged in")
}
else {
console.log("not logged in")
}
}
}

我已经用了好几天了，我很累，我想我做错了什么。你能帮我吗？

Answer 1

最小设置演示-https://stackblitz.com/edit/angular-router-basic-example-k1kbr9

我没有为ResetPassword使用单独的模块。但是这个示例将帮助您在代码中处理它。

上面，它还从提供的URL中获取令牌值。

希望它能有所帮助！

Answer 2

您好！

我可以在reset-password-form.module.ts中假设这个问题。应该是这样的：

const routes: Routes = [
{ path: '', component: ResetPasswordFormComponent }
];

在您的app-routing.module.ts:中

{
path: 'reset-password',
loadChildren: () => import('./reset-password.module').then(m => m.ResetPasswordModule)
},

附言：还有另一种方法，你也可以从app-routing.module.ts中删除apper路由，只需将该路由名称移动到reset-password-form.module.ts:中

const routes: Routes = [
{ path: 'reset-password', component: ResetPasswordFormComponent }
];

问题：根据您当前的路由架构，您的路径名重叠，您的ResetPasswordComponent应该可以在此处访问：http://localhost:4200/reset-password/reset-password

Stacklitz示例：https://stackblitz.com/edit/angular-lpgp3u

Answer 3

我刚刚删除了所有内容，并从头开始重新进行，现在它可以工作了。不知道我忘了什么。。。