Angular15组件交互时模板重复/无报错问题求助

问题根源分析 #

1. 表单全局显示：app.component.html中<app-learning>直接放在<router-outlet>外侧，而app-root是应用根组件，所有路由页面加载时都会渲染根组件内容，因此app-learning会在所有页面显示。
2. 表单重复显示：learning.component.html中包含了<head>和<body>标签，Angular组件模板仅需编写组件内部的DOM结构，不需要根级的<head>/<body>。浏览器解析时会将这些标签自动移动到页面的真实<head>/<body>中，导致组件内容被重复渲染。

修复步骤 #

1. 调整根组件模板（app.component.html） #

如果app-learning只需要在特定路由页面显示，将其从根组件移除，配置到对应路由的组件中；如果确实需要作为全局布局的一部分，保留标签即可。

修改后的app.component.html（按需调整）：

<router-outlet></router-outlet>
<!-- 仅当需要全局显示时保留下方标签，否则删除 -->
<app-learning [pagetitle]="name"></app-learning>

2. 修正子组件模板（learning.component.html） #

移除多余的<head>和<body>标签，只保留组件内部内容：

<h1>{{header}}</h1>
<br><br>
<h1>Second form </h1>
<div class="container">
    <form name="Login" (submit)="Evaluate($event)">
        <input class=".styling" type="text" name="email-input" id="email"  [ngClass]="validstatusemail"> <br>
        <span>{{msgemail}}</span><br>
        <input class=".styling" type="password" name="pass-input" id="password" [ngClass]="validstatuspassword"> <br>
        <span>{{msgpassword}}</span><br>
        <input class=".styling" type="submit" value="Login" id="button">
        <br><br>
    </form>
</div>
<h1>{{pagetitle}}</h1>

3. 额外优化建议 #

• 避免直接操作DOM：Evaluate方法中使用document.querySelector获取DOM元素，Angular推荐用@ViewChild获取组件内元素，更符合框架机制：

  import { ViewChild, ElementRef } from '@angular/core';
  
  // 组件类内定义
  @ViewChild('emailInput') emailInput!: ElementRef<HTMLInputElement>;
  @ViewChild('passwordInput') passwordInput!: ElementRef<HTMLInputElement>;
  
  // Evaluate方法中使用
  const emailValue = this.emailInput.nativeElement.value;
  const passwordValue = this.passwordInput.nativeElement.value;
  

  模板中添加引用变量：

  <input #emailInput class=".styling" type="text" name="email-input" id="email"  [ngClass]="validstatusemail">
  <input #passwordInput class=".styling" type="password" name="pass-input" id="password" [ngClass]="validstatuspassword">
  

• 使用Angular表单模块：推荐用ReactiveFormsModule或FormsModule做表单验证，比手动判断更简洁易维护。

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