为什么单击图标会重新加载角度页面

Question

我有一个Angular 5应用程序，它表现出一些奇怪的行为（对我而言）。我的手风琴上有一个图标：

    <ngb-accordion>
        <ngb-panel *ngFor="let subspace of lab.subSpaces" #group>
            <ng-template ngbPanelTitle>
                {{ subspace.name }}
                <button *ngIf="isLabManager" class="float-right"
                        style="margin-bottom: 0;margin-right: 10px;"
                        (click)="deleteSubSpace(subspace)">
                    <i class="fa fa-trash btn btn-danger"></i>
                </button>
            </ng-template>

当我单击该图标时，deleteSubSpace代码会运行，但同时页面会重新加载到angular应用程序的主页，我一生都无法找出原因。代码只是从列表中删除一个子空间：

deleteSubSpace(subspace: SubSpace): void {
    const index = this.lab.subSpaces.findIndex(x => x.id == subspace.id);
    if (index !== -1) {
        this.lab.subSpaces.splice(index, 1);
    }
}

我意识到从列表中删除一个元素将导致该子组件不得不刷新，但是如果我当前使用的是/ details / 1234的URL，那么当我删除该项目时，为什么要在/上重新加载页面而不是/ details / 1234？

更多的陌生感。如果我将此代码放在ngOnInit中：

setTimeout(() => this.deleteSubSpace(this.lab.subSpaces[1]), 5000);

然后在加载子空间后5秒钟便消失了。因此，删除方法显然没有错。从(click)处理程序中以某种方式调用该方法会导致重新加载。