Angular刷新页面/直接访问URL时ngOnInit不触发问题求助
问题描述
- 未实现任何防护或路由守卫的情况下,刷新页面或直接访问URL(如
mydomain/AdminPage)时,AdminPageComponent的ngOnInit钩子不触发;但从登录页通过routerLink导航到AdminPage时能正常触发,刷新则失效。 AppComponent的ngOnInit每次刷新都会触发,本地环境一切正常,仅部署到IIS服务器时出现该问题,尝试监听路由事件等方法无效。
更新
意外发现未将API地址从https://localhost:port/api改为mydomain/api部署时,刷新页面居然能正常调用API且ngOnInit触发,怀疑问题可能与API相关。
相关代码
AdminPageComponent
import { HttpClientModule } from '@angular/common/http'; import { Component, OnInit } from '@angular/core'; import { MatCardModule } from '@angular/material/card'; import { GuestsService } from '../guests.service'; import { Router } from '@angular/router'; import { FormsModule } from '@angular/forms'; import { CommonModule } from '@angular/common'; @Component({ selector: 'app-admin-page', standalone: true, imports: [FormsModule, MatCardModule, HttpClientModule, CommonModule ], templateUrl: './admin-page.component.html', styleUrl: './admin-page.component.css' }) export class AdminPageComponent implements OnInit { ProfissionValue:number = 0; guests: any; filteredGuests:any; filterData(){ if (this.ProfissionValue != 0) this.guests = this.filteredGuests.filter((d: any) => d.category == this.ProfissionValue); else this.guests = this.filteredGuests; } constructor(private guestService: GuestsService,private router: Router) { } ngOnInit(): void { this.guestService.getGuests().subscribe(res => { this.guests = res.data; this.filteredGuests = res.data; }); } ldata: dataToSelect[] = [ { Name: 'المهنه', Id: 0 }, { Name: 'كاتب سيناريوهات', Id: 1 }, { Name: 'كاتب اغاني', Id: 2 }, { Name: 'ممثل', Id: 3 }, { Name: 'الانتاج', Id: 4 }, { Name: 'مونتاج reels', Id: 5 }, { Name: 'غناء', Id: 6 }, { Name: 'بحث \\ كتابة محتوى', Id: 7 }, { Name: 'مقدم-ة محتوى', Id: 8 }, { Name: 'Animation \\ after effect', Id: 9 }, { Name: 'مصمم جرافيكي', Id: 10 }, { Name: 'اخر', Id: 11 }, ] } interface dataToSelect { Name: string, Id: number }
LoginComponent
import { CommonModule } from '@angular/common'; import { HttpClientModule } from '@angular/common/http'; import { Component } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { Router, RouterLink, RouterLinkActive, RouterOutlet } from '@angular/router'; import { UsersService } from '../users.service'; @Component({ selector: 'app-login', standalone: true, imports: [ RouterOutlet, CommonModule, HttpClientModule, FormsModule, RouterOutlet, RouterLink, RouterLinkActive ], templateUrl: './login.component.html', styleUrl: './login.component.css' }) export class LoginComponent { email: string = ""; password: any = ""; userID: number = 0; constructor(private userService: UsersService,private router:Router) { } onLoginClick() { const user = { Email : this.email, Password : this.password } this.userService.login(user).subscribe(res => { if (res.data != -1){ this.router.navigate(['AdminPage']); } else { alert(res.message); } }) } }
AppComponent
import { Component, OnInit } from '@angular/core'; import { NavigationEnd, Router, RouterLink, RouterLinkActive, RouterModule, RouterOutlet, Routes } from '@angular/router'; import { FormsModule, FormBuilder, FormGroup, ReactiveFormsModule } from '@angular/forms'; import { CommonModule } from '@angular/common'; import { HttpClientModule } from '@angular/common/http'; import { MatToolbarModule } from '@angular/material/toolbar'; import { MatButtonModule } from '@angular/material/button'; import { GuestsService } from './guests.service'; @Component({ selector: 'app-root', standalone: true, imports: [ ReactiveFormsModule, MatToolbarModule, HttpClientModule, MatButtonModule, CommonModule, FormsModule, RouterOutlet, RouterLink, RouterModule, RouterLinkActive ], templateUrl: './app.component.html', styleUrl: './app.component.css' }) export class AppComponent implements OnInit{ constructor(public router:Router) { } ngOnInit(): void { if (this.router.url == "") this.router.navigate(['Home']); } title = "نفس" }
AppRoutes
import { Routes } from '@angular/router'; import { LoginComponent } from './login/login.component'; import { GuestRegisterComponent } from './guest-register/guest-register.component'; import { HomePageComponent } from './home-page/home-page.component'; import { AdminPageComponent } from './admin-page/admin-page.component'; import { ThanksForRegisterComponent } from './thanks-for-register/thanks-for-register.component'; export const routes: Routes = [ { path: 'login', component: LoginComponent, pathMatch: 'full' }, { path: 'guestRegister' , component: GuestRegisterComponent, pathMatch: 'full' }, { path: 'Home' , component: HomePageComponent , pathMatch: 'full'}, { path: 'AdminPage' , component: AdminPageComponent, pathMatch: 'full'}, { path: 'Welcome' , component: ThanksForRegisterComponent, pathMatch: 'full'}, { path: '**' , component: HomePageComponent}, ];
内容的提问来源于stack exchange,提问作者Marwan Abu Ahmad
相关产品推荐
相关产品推荐

