화면 크기에 따라 콘텐츠를 표시하는 방법을 각도 4로 변경하십시오.

Question

큰 화면 크기에는 3 개의 콘텐츠 열이 있습니다. 작은 화면 크기에서 3 개의 탭이있는 탭 컨트롤에 내용을 표시하려고합니다.

아래의 html을 사용하여 작업하고 있습니다. 문제는 구성 요소가 바인딩 된 데이터를 변경하면 해당 구성 요소의 다른 복사본을 업데이트하지 않는다는 것입니다. 따라서 화면이 큰 동안 데이터가 변경되면 화면이 작아지고 탭으로 올바르게 전환되지만 데이터는 업데이트 된 것으로 표시되지 않습니다. 코드의 실제 데이터 객체는 잘 업데이트됩니다.

복사 된 구성 요소를 항상 동기화하여 표시 할 수 있습니까? 기본적으로 하나가 변경되면 다른 하나는 변경 사항을 모방합니다. 또는 화면이 작을 때 탭에 콘텐츠를 표시하는 것과 동일한 목표를 달성하는 다른/더 좋은 방법이 있습니까?

<div fxHide fxShow.gt-sm > 
 
    <div> 
 
    <h3>Column 1</h3> 
 
    <custom-component1 
 
     [(data)]="data1"> 
 
    </custom-component1> 
 
    </div> 
 
    <div> 
 
    <h3>Column 2</h3> 
 
    <custom-component2 
 
     [(data)]="data2"> 
 
    </custom-component2> 
 
    </div> 
 
    <div> 
 
    <h3>Column 3</h3> 
 
    <custom-component3 
 
     [(data)]="data3"> 
 
    </custom-component3> 
 
    </div> 
 
    
 
    <mat-tab-group fxShow fxHide.gt-sm> 
 
    <mat-tab label="Column 1"> 
 
     <div> 
 
     <h3>Column 1</h3> 
 
     <custom-component1 
 
      [(data)]="data1"> 
 
     </custom-component1> 
 
     </div> 
 
    </mat-tab> 
 
    <mat-tab label="Column 2"> 
 
     <div> 
 
     <h3>Column 2</h3> 
 
     <custom-component2 
 
      [(data)]="data2"> 
 
     </custom-component2> 
 
     </div> 
 
    </mat-tab> 
 
    <mat-tab label="Column 3"> 
 
     <div> 
 
     <h3>Column 3</h3> 
 
     <custom-component3 
 
      [(data)]="data3"> 
 
     </custom-component3> 
 
     </div> 
 
    </mat-tab> 
 
    </mat-tab-group> 
 
</div>

Answer 1

내 문제를 해결 :

는 편집 :하자 데이터가 화면 폭의 크기를 관찰하기위한 여기

는 코드입니다. 나는 정말로 두 개의 디스플레이 유형 사이에서 라디오 버튼과 체크 박스를 동기화하는 데 문제가 있다는 것을 알았습니다. 라디오 버튼 그룹의 이름이 지정 되었기 때문에 문제가있는 것으로 밝혀졌으며 동일한 이름을 가진 두 개의 그룹이 있다는 점을 좋아하지 않았습니다.

어쨌든 이름을 지정할 필요가 없으므로 단순히 내 문제를 해결 한 이름을 제거하십시오. 이름이 필요한 경우 OnInit()가 생성 된 이름에 GUID를 추가하려고합니다. 고유해야하기 때문에 여러 개의 렌더링 된 사본이있는 구성 요소에는 ID와 이름이 없으므로 기본적으로주의하십시오.

Answer 2

당신은 클라이언트 창 크기의 관찰을 사용해야합니다!

Here하는 방법입니다! 또는 flex-layout을 각도로 사용할 수 있습니다.이 라이브러리가 도움이된다는 것을 알았습니다.

당신의-component.component.ts

import { Component, AfterViewInit } from '@angular/core'; 
import { ObservableMedia, MediaChange } from '@angular/flex-layout'; 
import { Subscription } from 'rxjs/Rx'; 

@Component({ 
    selector: 'app-your-component', 
    templateUrl: './your-component.component.html', 
    styleUrls: ['./your-component.component.css'] 
}) 
export class YourComponentComponent implements AfterViewInit { 

    // Subscription of the observer of the screen size 
    mediaQuery$: Subscription; 

    // The active media query (xs | sm | md | lg | xl) 
    activeMediaQuery: string; 

    constructor(
     private observableMedia: ObservableMedia 
    ){} 

    ngAfterViewInit() { 

     this.mediaQuery$ = this.observableMedia.subscribe((change: MediaChange) => { 
      this.activeMediaQuery = `${change.mqAlias}`; 
      if (this.activeMediaQuery === 'xs' || this.activeMediaQuery === 'sm') { 
       // Here goes code for update data in xs or sm (small screen) 
      } else { 
       // Here goes code for update data in gt-sm (bigger screen) 
      } 
     }); 
    } 
}