イオンスライダー - 画像フォルダの内容を読む

Question

今、私はいくつかの画像が含まれてイオンを使用して簡単なビューを実装していますし、コードは次のようになります。

<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>を作成するのが最善の方法だろうと思っていました。まだ多くの資産が残っているので、毎回カスタムコードを追加するのは現実的ではないと思います。

Answer 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エンドポイントなどから取得できますが、データからテンプレートを切り離すことができます。