使用角度路由器向后单击导致 NgFor 的连续检查触发

Question

使用 Angular 13，我正在开发一个页面，该页面具有每个用户项目的图块列表的仪表板。当用户单击图块时，我使用路由器出口路由到该页面的收件箱。这一切都有效。

但是，当用户单击收件箱中的后退按钮时，页面看起来不错，但 showOutlet 开始与所有带有 ngIf 的子 div 一起受到攻击。这并不是“杀死”性能，但它导致了很多点击事件的奇怪现象，而且总体来说似乎不是最理想的。 我想我的问题是：处理后退按钮点击的最佳方法是什么？

这是我当前使用的代码的简化版本。

<div class="app-wrapper">
    <ng-container>
        <header></header>
        <div class="page" *ngIf="!showOutlet()">
            <!-- Anonymized psuedo-code  -->
            <ng-container  *ngFor="let page of pages">
            (click)="tileClick(tile, request)"

        </div>
        <router-outlet *ngIf="showOutlet"></router-outlet>
    </ng-container>
</div>

public tileClick(tile: ICpTileData, project: projectObj) {
    // tile.route is "/project/[project ID]"
    if (project.StatusCd === 'Sent') {
        if(tile.route) {
            this.showOutlet = true;
                this.router.navigate([tile.route]);        }
                ...
    }
...
}
    public showOutlet(): boolean {
        let routes: string[] = ['page', 'userprofile'];
        for (const r of routes) {
            if (this.router.url.toLowerCase().includes(r)) { 
                return true;
            }
        }
        this.titleService.setTitle('My Events');
        return false;
    }

我尝试将 showOutlet 设为变量而不是函数，并在 popstateEvent 上将其设置为 false，但我找不到从 typescript 对象派生目标 url 的方法，这意味着我必须假设任何返回单击将返回仪表板，我不想这样做。

Answer 1

为了解决这个问题，我将 ngIf 绑定到 showOutlet 变量而不是函数，并根据 Init 上的路由进行设置。另外，至关重要的是，我还将 ngFor 设置为在 Init 上加载的

variable

（现在是后退单击），而不是函数。无论如何，这可能是最佳实践，但它似乎非常重要。 为了更优雅地处理返回点击，我确保目标 URL 是仪表板而不是子路由，然后重新加载所有项目。

    @HostListener('window:popstate', ['$event'])
        onPopState(event: PopStateEvent ) {
            if(location.href.endsWith('/dashboard')){
                this.showOutlet = false;
                this.loadingProjects = true;
                this.loadProjects();
            }  
    }