当我刷新页面时,Angular ngOnInit 不会被触发

问题描述 投票:0回答:1

我有一个问题,当我刷新页面或当我知道我没有实现任何类型的保护或任何类型的防护而尝试直接访问我的网址时,ngOnInit 不会被触发。 意思是当我尝试输入 mydomain/AdminPage ngOnInit 时不会被触发 但是当我使用路由器链接从登录页面导航到管理页面时,它会被触发一次,当我尝试刷新页面时,什么也没有发生。我还没有对登录页面或管理页面实施任何类型的身份验证。 (预计每次尝试都会加载页面) 事情在另一个页面上(例如 app.component),每次刷新时都会触发 ngOnInit。

下面是我的代码

管理页面.组件:

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
}

登录组件:

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);
      }
    })
  }
}

应用程序组件:

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 = "نفس"
}

应用程序.路线:

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},
];

我尝试了很多事情,包括尝试捕获路由器事件。 在本地主机上,一切正常,当我刷新页面时,每次刷新时都会调用该问题,仅在 iis 服务器上部署时才会出现问题

angular angularjs typescript angular-material angular-ui-router
1个回答
0
投票

如果路由在本地工作,而部署时却不起作用,则可能是您缺少 url 的重写规则

iis服务器重写示例

© www.soinside.com 2019 - 2024. All rights reserved.