单击浏览器上的返回<-按钮时从数组中删除项目

Question

.ts文件

public selectedFolders: string[] = []; // Array to store the selected folders

// Current content for folder1 is being displayed when I click on the folder -- the content for folder2 gets displayed 
public updateDocumentsList(item: Model) {
this.selectedFolders.push(item.name);
this.router.navigate(['../url'], {queryParams:​​​​​​​ { a: this.a, b: this.b, site: this.siteName, sitefolderID: item.id}​​​​​​​​​​​, relativeTo: this.route }​​​​​);
}

.html文件

// Passing the value stored on selectedFolders array here to display Example: Folder1 > Folder2
<a class="Folders-item" 
[href]="" 
target="_blank" 
*ngFor="let selectedFolder of selectedFolders; let i= index" 
(updateDocumentsList)="updateDocumentsList($event)">> {{ selectedFolders }} </a>

问题：

单击后退箭头时，folder1的内容会更新，但显示器仍显示Folder1 > Folder2

预期行为：

单击后退箭头时，文件夹结构也应该更新，并且只显示Folder1

Answer 1

我敢打赌，这是因为.push会影响当前数组，并且不会更改对数组的引用，从而强制进行更改检测。

尝试：

public updateDocumentsList(item: Model) {
this.selectedFolders = [...this.selectedFolders, item.name];
this.router.navigate(['../url'], {queryParams:​​​​​​​ { a: this.a, b: this.b, site: 
this.siteName, sitefolderID: item.id}​​​​​​​​​​​, relativeTo: this.route }​​​​​);
}

执行this.selectedFolders = [....]会将selectedFolders分配给内存中的一个新区域，并强制进行更改检测。