Angular 在重置密码功能中未从外部 link 找到组件
Angular component not found from external link in reset password feature
这里是新手。
我正在尝试为 java Spring 引导应用程序编写重置密码功能。前面使用 Angular 7.
用户输入他的电子邮件并点击重置按钮。然后,令牌存储在用户 table 中,用户收到一封带有 link 的邮件,如下所示:
http://localhost:4200/reset-password?token=7f278bf1-40c7-4b1a-bde5-76744b866241
当我点击这个 link 时,出现 404 错误。该应用似乎没有找到 ResetPasswordForm 组件。
重置密码-form.module.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 { }
应用-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 { }
重置密码-form.component.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")
}
}
}
我已经使用这个功能好几天了,好吧,我很累,我想我做错了什么。你能帮帮我吗?
美好的一天!
我可以假设 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)
},
P.S。另一种方法,您也可以从 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
Stackblitz 示例:https://stackblitz.com/edit/angular-lpgp3u
最小设置演示 - https://stackblitz.com/edit/angular-router-basic-example-k1kbr9
我没有为 ResetPassword 使用单独的模块。但此示例将帮助您在代码中处理它。
上面,它还从提供的 URL 中获取令牌值。
希望对您有所帮助!
我刚刚删除了所有内容,然后从头开始重做,现在可以了。不知道我忘了什么...
这里是新手。 我正在尝试为 java Spring 引导应用程序编写重置密码功能。前面使用 Angular 7.
用户输入他的电子邮件并点击重置按钮。然后,令牌存储在用户 table 中,用户收到一封带有 link 的邮件,如下所示:
http://localhost:4200/reset-password?token=7f278bf1-40c7-4b1a-bde5-76744b866241
当我点击这个 link 时,出现 404 错误。该应用似乎没有找到 ResetPasswordForm 组件。
重置密码-form.module.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 { }
应用-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 { }
重置密码-form.component.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")
}
}
}
我已经使用这个功能好几天了,好吧,我很累,我想我做错了什么。你能帮帮我吗?
美好的一天!
我可以假设 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)
},
P.S。另一种方法,您也可以从 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
Stackblitz 示例:https://stackblitz.com/edit/angular-lpgp3u
最小设置演示 - https://stackblitz.com/edit/angular-router-basic-example-k1kbr9
我没有为 ResetPassword 使用单独的模块。但此示例将帮助您在代码中处理它。
上面,它还从提供的 URL 中获取令牌值。
希望对您有所帮助!
我刚刚删除了所有内容,然后从头开始重做,现在可以了。不知道我忘了什么...