Angular移除子组件后URL异常跳转问题求助

问题根源 #

移除子组件时URL变为#并触发页面跳转，核心原因是删除按钮的<a>标签带有href="#"属性，点击时会触发浏览器默认的锚点跳转行为——即使绑定了(click)事件，浏览器仍会执行默认跳转逻辑。

1. 解决URL跳转问题 #

有两种简单方式阻止默认跳转：

方式一：移除href="#"属性 #

Bootstrap的dropdown-item样式不依赖href属性，直接删除即可：

<!-- 子组件模板修改 -->
<a (click)="remove()" class="dropdown-item">Delete Panel</a>

方式二：在点击事件中阻止默认行为 #

如果需要保留href="#"，可通过事件对象阻止默认跳转：

<!-- 子组件模板修改 -->
<a (click)="remove($event)" class="dropdown-item" href="#">Delete Panel</a>

同时修改子组件的remove方法：

// 子组件代码修改
remove(event?: Event) {
  if (event) {
    event.preventDefault(); // 阻止浏览器默认跳转行为
  }
  this.removeCallback(this.index);
}

2. 优化删除逻辑（避免索引错乱） #

当前代码依赖*ngFor的index作为删除标识，删除后后续组件的索引会自动偏移，可能导致删除错误。建议给每个子项添加唯一ID，并使用trackBy优化渲染：

父组件代码修改 #

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

@Component({
  selector: 'app-panel',
  templateUrl: './panel.component.html',
  styleUrls: ['./panel.component.css']
})
export class PanelComponent implements OnInit {
  children: {id: number}[] = [];
  private nextId = 0;

  ngOnInit(): void {
  }

  addChild(){
    this.children.push({id: this.nextId++}); // 为每个子项添加唯一ID
  }

  removeChild(id: number) {
    // 通过ID过滤删除，而非依赖索引
    this.children = this.children.filter(child => child.id !== id);
  }

  getRemovecallback(id: number) {
    return () => this.removeChild(id);
  }

  // 定义trackBy函数，优化*ngFor渲染性能并避免索引问题
  trackByChildId(index: number, child: {id: number}): number {
    return child.id;
  }
}

父组件模板修改 #

<div class="container">
    <h1 class="page-header">Dynamic Panels</h1>
    <hr>
    <section>
        <div class="" style="margin-bottom: 15px;">
            <button class="btn btn-primary" (click)="addChild()">Add Panel</button>
        </div>

        <panel-child 
          *ngFor="let child of children; trackBy: trackByChildId" 
          [id]="child.id" 
          [removeCallback]="getRemovecallback(child.id)"
        ></panel-child>

    </section>
</div>

子组件代码修改 #

import { Component, Input } from '@angular/core';
import { PanelComponent } from './panel.component';

@Component({
  selector: 'panel-child',
  templateUrl: './panel-child.component.html',
  styleUrls: ['./panel-child.component.css']
})
export class PanelChildComponent {
  @Input() id!: number;
  @Input() removeCallback: Function = () => {};

  constructor(private parent: PanelComponent) { }

  remove(event?: Event) {
    if (event) {
      event.preventDefault();
    }
    this.removeCallback(this.id);
  }
}

额外清理 #

父组件模板中保留了AngularJS的ng-controller和ng-init指令，这在Angular中完全无效，建议删除：

<!-- 原无效代码 -->
<div class="container" ng-controller="PanelController as vm" ng-init="vm.init()">
<!-- 修改后 -->
<div class="container">

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