각도 5 : 탭 사이를 전환 할 때 탭 내용을 다시로드하지 못하도록합니다.

Question

Material Design을 기반으로 관리 백엔드 개발에 Angular 5를 사용하고 있습니다. 보기 중 하나는 iframe이 포함 된 첫 번째 탭을 기반으로하는 탭입니다. 그러나 여러 탭간에 변경 한 다음 iframe을 보유한 첫 번째 탭으로 이동하면 iframe이 다시로드됩니다. 목표는 콘텐츠를 다시로드하지 않고 탭간에 전환하는 것입니다. 이것을 어떻게 할 수 있습니까?

방 details.template.html

<mat-card class="p-0"> 
    <mat-tab-group> 
    <mat-tab label="Vorschau"> 
     <mat-card-content class="mt-1"> 
      <iframe src="https://......" width="100%" height="400px" frameborder="0"></iframe> 
     </mat-card-content> 
    </mat-tab> 
    <mat-tab label="Einstellungen"> 
     <mat-card-content> 
     <p class="mt-1">Sprache</p> 
     <mat-radio-group fxLayout="column"> 
      <mat-radio-button [style.marginBottom]="'.5rem'" value="1">Deutsch</mat-radio-button> 
      <mat-radio-button [style.marginBottom]="'.5rem'" value="2">Englisch</mat-radio-button> 
      <mat-radio-button [style.marginBottom]="'.5rem'" value="3">Französisch</mat-radio-button> 
     </mat-radio-group> 
     <mat-divider class="mb-1 mt-1"></mat-divider> 
     </mat-card-content> 
    </mat-tab> 
    </mat-tab-group> 
</mat-card> 

현재 논리가 아직 방 details.component.ts에서 구현되지 않습니다.

Answer 1

수 없습니다.

구성 요소를 라우트 할 때 구성 요소를 떠나면 실제로이를 파기합니다.

다시 돌아 오면 다시 작성하여 모든 HTML (IFrame 포함)을로드한다는 의미입니다.

라우팅되지 않은 구성 요소를 사용해 볼 수도 있습니다 (탭에서 구성 요소 인스턴스를 유지하거나 파기해도 기억이 안 나지만 계속 유지한다고 말하면됩니다) 또는 위의 라우터 콘센트에 IFrame을 연결하고, 절대 경로로 지정하십시오 (경로가 원하는 경로와 일치하지 않을 때 표시하지 않음).

구성 요소를 다시로드하지 않아도되지만 iframe은 오래되어 널리 사용되지는 않았습니다.