Angular项目Login组件无法正常加载，仅悬停其他组件时触发加载如何解决

核心问题原因 #

你的问题是Angular的变化检测没有被正常触发导致视图延迟更新，结合代码的具体修复方案如下： #

1. 修复第三方异步库的变化检测问题 #

你使用了axios作为请求库，Angular默认的变化检测机制只会监听框架自身封装的异步事件（如HttpClient请求、内置定时器、绑定的DOM事件等），axios的回调不在Angular的NgZone管理范围内，回调执行后不会触发视图更新。只有当你触发鼠标悬停这类DOM事件时，才会顺带触发变化检测更新页面，和你描述的现象完全匹配。

修复方案

优先推荐替换axios为Angular原生的HttpClient，不需要额外处理变化检测逻辑。如果要继续使用axios，需要把异步回调包裹在NgZone中：
首先在LoginComponent中注入NgZone：

import { Component, OnInit, NgZone } from '@angular/core';
// ...
export class LoginComponent implements OnInit {
  constructor(private ngZone: NgZone) {}
  // 原有代码
}

修改submitForm中的axios回调逻辑：

submitForm(){
  axiosInstance
    .post("/api/token/obtain/", {
      username: this.username,
      password: this.password,
    })
    .then((response) => {
      this.ngZone.run(() => {
        axiosInstance.defaults.headers["Authorization"] = "JWT " + response.data.access;
        localStorage.setItem("access_token", response.data.access);
        localStorage.setItem("refresh_token", response.data.refresh);
        sessionStorage.setItem("isAuth", 'true');
        // 如果有登录成功后的路由跳转逻辑，也放在这个run方法内
      })
    })
    .catch((error) => {
      console.log("login error", error);
    });
}

2. 修正AppModule引导配置 #

你当前AppModule的bootstrap数组中同时声明了AppComponent和LoginComponent，正常Angular应用仅需要引导根组件AppComponent即可，LoginComponent是路由渲染组件，不需要放到引导列表中，否则会导致渲染逻辑冲突：

@NgModule({
  declarations: [
    AppComponent,
    LoginComponent,
    WelcomeComponent // 额外补充：路由中用到的WelcomeComponent也需要放到declarations数组中
  ],
  imports: [/* 原有导入项，确保已导入ReactiveFormsModule、FormsModule、NgZorroAntdModule相关组件 */],
  bootstrap: [AppComponent] // 仅保留根组件
})

3. 修复表单异常问题 #

• 你同时混用了响应式表单FormGroup和模板驱动的[(ngModel)]，该用法已不被推荐，且需要同时导入ReactiveFormsModule和FormsModule才能正常运行。建议统一使用响应式表单，删除[(ngModel)]绑定，直接从表单实例中取值：

// 提交逻辑取值改为
const { userName, password } = this.validateForm.value;
axiosInstance.post("/api/token/obtain/", { username: userName, password: password })

• 你的模板中存在formControlName="remember"的控件，但是对应的FormGroup中没有声明该控件，会抛出运行时错误影响渲染，需要补充声明：

validateForm = new FormGroup({
  userName: new FormControl(''),
  password: new FormControl(''),
  remember: new FormControl(false) // 补充记住我控件
})

4. 检查根组件路由出口 #

确认AppComponent的模板中存在<router-outlet></router-outlet>标签，路由匹配到的组件会渲染到该标签位置，漏加会导致组件无法显示。

内容的提问来源于stack exchange，提问作者LosProgramer