Могу ли я изменить поведение кнопки возврата в браузере в приложении angular?

Question

У меня есть изображение (al-image) в моем приложении angular, когда я нажимаю на это изображение, я открываю другой компонент с полноэкранным изображением, но если я нажимаю кнопку «назад» (когда изображение полноэкранное), мой маршрут меняется, но в этом случае я хочу закрыть полноэкранное изображение и отобразить компонент al-image

parent.component:

    <al-image
                        *ngIf="!isFirstImageWasClicked; else fullscreen1"
                        (click)="onImageClick(solutionsImages[0].id)"
                        class="main-block-image"
                        [image]="solutionsImages[0].image"
                    >
                    </al-image>
                    <ng-template #fullscreen1>
                        <al-fullscreen (imageClick)="onImageClick(solutionsImages[0].id)" [imageSrc]="imageSrc1"></al-fullscreen>
                    </ng-template>
    <al-image
                        *ngIf="!isSecondImageWasClicked; else fullscreen2"
                        (click)="onImageClick(solutionsImages[1].id)"
                        class="main-block-image"
                        [image]="solutionsImages[1].image"
                    >
                    </al-image>
                    <ng-template #fullscreen2>
                        <al-fullscreen (imageClick)="onImageClick(solutionsImages[1].id)" [imageSrc]="imageSrc2"></al-fullscreen>
                    </ng-template>

public onImageClick(id: number): void {
        if (id === 1) {
            this.isFirstImageWasClicked = !this.isFirstImageWasClicked;
        } else if (id === 2) {
            this.isSecondImageWasClicked = !this.isSecondImageWasClicked;
        } else {
            this.isThirdImageWasClicked = !this.isThirdImageWasClicked;
        }
        document.documentElement.style.overflowY = 'hidden';
    }

fullscren.component

<div class="fullscreen-image-wrapper">
    <img class="fullscreen-image" (click)="onFullScreenImageClick()" [src]="imageSrc">
</div>

@Input() public imageSrc: string;
    @Output() public imageClick: EventEmitter<boolean> = new EventEmitter();
    constructor() {
    }

    public onFullScreenImageClick(): void {
        this.imageClick.emit();
        document.documentElement.style.overflowY = 'scroll';
    }

.fullscreen-image-wrapper {
    position: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 101;
    top: 0;
    left: 0;
    background: white;
    width: 100%;
    height: 100%;
}

.fullscreen-image {
    max-width: 90%;
    max-height: 90%;

    &:hover {
        cursor: pointer;
    }
}

Answer 1

Вы можете думать только о html, здесь:

<a [href]="imageSrc">
  <img class="fullscreen-image" [src]="imageSrc">
</a>

Изменить: удалено target = "_ blank"

Answer 2

Вы не переходите на новую страницу, поэтому вы не можете использовать кнопку «Назад». Одним из решений является переход к изображению с использованием URL-адреса изображения. Другое решение - отображение изображения в диалоговом окне.