Angular锚点跳转页面指定元素时控制台报错问题咨询

控制台抛出的两个错误分别来自两处逻辑缺陷：

• 空引用错误：组件初始化时文本域未渲染。你绑定在textarea上的*ngIf="edit; else readonlyComment"控制了文本域只有在edit为true时才会被插入DOM，但组件初始化阶段edit默认值为false，此时ngOnInit里直接执行this.textArea.nativeElement.focus()，会因为拿不到textarea的DOM实例，读取undefined的nativeElement属性抛出错误。
• 锚点跳转错误：目标元素缺失+执行时序冲突。你在Reply按钮的a标签上写了href="#temporaryLastRow"的原生锚点规则，但当前模板里根本没有定义id="temporaryLastRow"的定位元素；同时原生a标签的跳转行为会先于Angular的(click)绑定方法执行——你本来是要点击Reply后才渲染回复区（也就是你说的页面最后一个定位元素），跳转触发时目标元素还未被渲染到DOM中，自然会抛出找不到跳转目标的错误。

按以下步骤修改即可消除所有控制台报错，同时保留跳转定位功能：

1. 修复文本域聚焦的空引用问题
   不要在ngOnInit阶段直接操作受*ngIf控制的元素，等编辑态开启、DOM渲染完成后再执行聚焦：

   // 正确声明模板引用，注意static设为false
   @ViewChild('textarea', { static: false }) textArea!: ElementRef<HTMLTextAreaElement>;
   
   ngOnInit(): void {
     // 移除原来在这里的focus调用，初始化阶段文本域不存在
   }
   
   // 在切换编辑态的方法里处理聚焦逻辑
   toggleEdit() {
     this.edit = !this.edit;
     if (this.edit) {
       // 等下一轮DOM更新完成后再获取元素聚焦
       setTimeout(() => {
         this.textArea?.nativeElement?.focus();
       });
     }
   }
   

2. 修复锚点跳转的报错
   • 首先在评论容器的最末尾（也就是你要定位的页面最后一个元素位置）加上目标span，和锚点id对应：

     <span id="temporaryLastRow"></span>
     

   • 移除Reply按钮里嵌套的原生a标签，把滚动定位逻辑放到Angular的方法里执行，避免原生跳转和Angular渲染的时序冲突，修改后的Reply按钮代码：

     <strong *ngIf="showReplyButton"
             class="reply-button"
             (click)="toggleReplyComponent()">
       Reply
     </strong>
     

   • 在toggleReplyComponent方法里，等组件渲染完成后再执行滚动定位：

     toggleReplyComponent() {
       // 保留你原来的切换回复组件显示/隐藏的逻辑
       this.showReply = !this.showReply;
       // 等DOM更新完成后滚动到目标位置
       setTimeout(() => {
         document.getElementById('temporaryLastRow')?.scrollIntoView({ behavior: 'smooth' });
       });
     }
     

   如果你需要保留a标签的默认样式，也可以把a标签的href设为javascript:void(0)，同时绑定(click)="$event.preventDefault()"阻止原生跳转行为，不要直接用#xxx的锚点href。

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