Angular 15：使用router-outlet包裹后输入元素为何显示为空？

问题现象 #

开发的Angular 15应用包含登录页和首页，登录页包含标题、两个文本输入框及按钮，存在以下异常：

• 直接渲染登录组件（不通过router-outlet）时，所有元素显示正常；
• 通过router-outlet加载登录组件后，输入框的标签、占位符、提示信息需开始输入才会显示；
• router-outlet上方的<app-header>组件内的按钮标签也无法正常显示；
• 给输入框设置常量默认值，同样需开始输入才会显示内容，推测问题与组件重渲染逻辑相关。

相关代码 #

app.component.html #

<app-header></app-header>
<router-outlet></router-outlet>

app-routing.module.ts #

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router'; 
import { LoginFormComponent } from './components/login-form/login-form.component'; 
import { OverviewComponent } from './components/overview/overview.component';

const routes: Routes = [   
 { path: '', redirectTo: '/sign-in', pathMatch: 'full' },   
 { path: 'sign-in', component: LoginFormComponent},   
 { path: 'overview', component: OverviewComponent }, 
 // { path: '**', component: PageNotFoundComponent } 
];

@NgModule({ 
  imports: [RouterModule.forRoot(routes)], 
  exports: RouterModule 
}) 
export class AppRoutingModule {}

解决方案 #

1. 修复表单组件变更检测 #

如果使用响应式表单或Angular Material控件，路由加载时可能存在变更检测延迟，可手动触发检测：
在LoginFormComponent中注入ChangeDetectorRef，在视图初始化后触发检测：

import { ChangeDetectorRef, Component, AfterViewInit } from '@angular/core';

@Component({
  selector: 'app-login-form',
  templateUrl: './login-form.component.html',
  styleUrls: ['./login-form.component.css']
})
export class LoginFormComponent implements AfterViewInit {
  constructor(private cdr: ChangeDetectorRef) {}

  ngAfterViewInit(): void {
    this.cdr.detectChanges();
  }
}

2. 调整路由预加载策略 #

默认路由懒加载可能导致组件资源加载不及时，启用全模块预加载：
修改app-routing.module.ts，添加预加载配置：

import { PreloadAllModules } from '@angular/router';

@NgModule({ 
  imports: [RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })], 
  exports: RouterModule 
}) 
export class AppRoutingModule {}

3. 检查变更检测策略 #

若组件设置了ChangeDetectionStrategy.OnPush，可能导致变更未被捕获：

• 移除组件元数据中的changeDetection: ChangeDetectionStrategy.OnPush配置；
• 或在app.component.ts中监听路由完成事件，触发全局变更检测：

import { Component } from '@angular/core';
import { Router, NavigationEnd } from '@angular/router';
import { ChangeDetectorRef } from '@angular/core';
import { filter } from 'rxjs/operators';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  constructor(private router: Router, private cdr: ChangeDetectorRef) {
    this.router.events.pipe(
      filter(event => event instanceof NavigationEnd)
    ).subscribe(() => {
      this.cdr.detectChanges();
    });
  }
}

4. 确认表单初始化时机 #

使用响应式表单时，确保表单控件在组件初始化阶段创建，避免异步延迟：

import { FormBuilder, FormGroup } from '@angular/forms';

@Component({...})
export class LoginFormComponent {
  loginForm: FormGroup;

  constructor(private fb: FormBuilder) {
    // 在构造函数中直接初始化表单
    this.loginForm = this.fb.group({
      username: [''],
      password: ['']
    });
  }
}

5. 排查样式冲突 #

检查全局样式或组件样式是否对输入框、标签设置了条件性隐藏规则：

• 移除input、label元素的display: none或visibility: hidden等初始隐藏样式；
• 确认Angular Material（若使用）的样式是否正确导入（如在styles.scss中引入@angular/material/prebuilt-themes/indigo-pink.css）。

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