2017-06-25 11 views
0

今、私はいくつかの画像が含まれてイオンを使用して簡単なビューを実装していますし、コードは次のようになります。イオンスライダー - 画像フォルダの内容を読む

<ion-content padding> 
<ion-slides pager> 

<ion-slide style="background-color: white"> 
    <h2>Slide 1</h2> 
    <img src="../../assets/img/animals/dog.jpg"> 
</ion-slide> 

<ion-slide style="background-color: white"> 
    <h2>Slide 2</h2> 
    <img src="../../assets/img/animals/horse.jpg"> 
</ion-slide> 

<ion-slide style="background-color: white"> 
    <h2>Slide 3</h2> 
    <img src="../../assets/img/animals/cat.jpg"> 
</ion-slide> 

私はイオンと角の一般性が非常に新しかったので、/ img/animalsフォルダ全体をループし、.jpgファイルをスキャンし、ファイルごとに<ion-slide>を作成するのが最善の方法だろうと思っていました。まだ多くの資産が残っているので、毎回カスタムコードを追加するのは現実的ではないと思います。

答えて

1

あなたは、アレイ上にテンプレートの反復処理を行うことができます、あなたのコンポーネントで

<ion-slide *ngFor="let slide of slides" style="background-color: white"> 
    <h2>{{ slide.title }}</h2> 
    <img [src]="slide.url"> 
</ion-slide> 

を、この変数を定義する「スライド」:どこかのコンポーネントの内部

class YouComponent { 
    slides = []; 
    someMethod() { } 
} 

、あなたはそれを定義することができます。

someMethod() { 
    this.slides = [ 
    { title: 'Title 1', url: 'url1.jpg' }, 
    { title: 'Title 2', url: 'url2.jpg' }, 
    { title: 'Title 3', url: 'url3.jpg' } 
    ] 
} 

this.slidesの値を設定するために使用されるこの配列は、y私たちのコンポーネントの.tsファイルは、設定ファイルから読み込むことができ、APIエンドポイントなどから取得できますが、データからテンプレートを切り離すことができます。

+0

「動的に」するには、毎回 'img'フォルダ全体をループしてオブジェクトの配列を作成することによってthis.slide []配列を生成する必要がありますか?私は本当に私の資産に関するカスタムコードを避けようとしているので、毎回大きなデータの更新があるためです。 –

+1

@GonrasKarolsこれは、.tsファイル(または外部の.jsonファイル)に配列をハードコードするか、assets/imagesフォルダの内容を読み込む何らかのルーチンを作成するという選択肢です。これがクライアント側のjavascriptを使って可能かどうかは分かりません)。 1つのアプローチは、このフォルダを読み込んで.jsonファイルを出力する開発時に実行するスクリプト(たとえばシェルスクリプト)を使用して、.jsonファイルの生成を自動化することです。 –

関連する問題