각 - Hammerjs - 스 와이프 동작에서 html 콘텐츠로드

Question

다음 스 와이프 동작은 템플릿에서 세 개의 이미지를로드합니다. 그들은 현재 잘 작동하지만 두 개의 이미지를 기능적 Google Maps iframe과 체크 박스와 이름의 루프로 변경하고 싶습니다.

이미지 링크를 html로 바꾸고 <img [src]="avatar.content" [alt]="">을 {{avatar.content}}으로 변경했지만 템플릿이 html을 일반 텍스트로 처리했습니다.

어떻게해야할까요?

component.ts

SWIPE_ACTION = { LEFT: 'swipeleft', RIGHT: 'swiperight' }; 

    avatars = [ 
    { 
     content: 'https://semantic-ui.com/images/avatar2/large/kristy.png', 
     visible: true 
    }, 
    { 
     content: 'https://semantic-ui.com/images/avatar2/large/matthew.png', 
     visible: false 
    }, 
    { 
     content: 'http://semantic-ui.com/images/avatar/large/jenny.jpg', 
     visible: false 
    } 
    ]; 

    // action triggered when user swipes 
    swipe(currentIndex: number, action = this.SWIPE_ACTION.RIGHT) { 
    // out of range 
    if (currentIndex > this.avatars.length || currentIndex < 0) { return }; 

    let nextIndex = 0; 

    // swipe right, next avatar 
    if (action === this.SWIPE_ACTION.RIGHT) { 
     const isLast = currentIndex === this.avatars.length - 1; 
     nextIndex = isLast ? 0 : currentIndex + 1; 
    } 

    // swipe left, previous avatar 
    if (action === this.SWIPE_ACTION.LEFT) { 
     const isFirst = currentIndex === 0; 
     nextIndex = isFirst ? this.avatars.length - 1 : currentIndex - 1; 
    } 

    // toggle avatar visibility 
    this.avatars.forEach((x, i) => x.visible = (i === nextIndex)); 
    } 

component.html

<div class="swipe-box" *ngFor="let avatar of avatars; let idx=index" (swipeleft)="swipe(idx, $event.type)" (swiperight)="swipe(idx, $event.type)" 
    [class.visible]="avatar.visible" [class.hidden]="!avatar.visible"> 
    <div class="swipe-content"> 
     <img [src]="avatar.content" [alt]=""> 
    </div> 
</div> 

그리고이 체크 박스 루프는 다음과 같습니다 어려움이 여기입니다

<md-list> 
    <md-list-item *ngFor="let guest of event['guests'] | keys"> 
     <md-icon md-list-icon><img class="event-img" src="http://lorempixel.com/70/70" /></md-icon> 
     <h3 md-line> {{ guest.value.first_name }} {{guest.value.last_name}} </h3> 
     <p md-line> 
     </p> 
     <span flex> 
      <md-checkbox *ngIf="checkGuest(guest.key) === false" (change)="checkIn(guest.key)"></md-checkbox> 
      <md-checkbox *ngIf="checkGuest(guest.key) === true" (change)="checkOut(guest.key)" [checked]="true === true"></md-checkbox> 
     </span> 
    </md-list-item> 
</md-list> 

Answer 1

확실하지. 현재있는 위치와 표시하려는 항목을 추적하는 색인이 있습니다. 해당 색인을 추적하는 일부 조건부를 사용하고 해당 색인을 기반으로 다른 템플릿/HTML 청크/지시문을 표시하십시오.

<div *ngIf='currentIndex == 1'><img></div> 
<div *ngIf='currentIndex == 2'><iframe></div> 

해당 템플릿 논리는 예제에서 '.swipe-content'div 아래에 살 것입니다. 타이프 스크립트 코드를 조금 수정해야 할 수도 있습니다. currentIndex는 구성 요소의 템플릿에서 사용할 수있는 변수로 정의/추적됩니다 (여기서는 함수로 전달되는 것처럼 보입니다).

Answer 2

이 라이브러리를 사용해보십시오 https://www.npmjs.com/package/ngx-carousel. 그것은 당신이 필요로하는 모든 기능을 가지고 있으며 사용하기 쉽습니다.