You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

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

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.06.27 20:23:23