How To Add Infinite Scrolling to Your Angular App
アプリの構築を開始するには、まず npm i @angular/cli を実行して Angular CLI をインストールします。 インストールした後、ng new image-gallery を実行して、画像ギャラリー アプリ用の新しい Angular を作成します。 また、メニューの状態を保存するために Flux ストアを作成します。
次に、アプリ用のライブラリをインストールします。 npm i @angular/cdk @angular/material ng-simple-slideshow ngx-infinite-scroll @ngrx/store を実行して、写真を表示したり、写真のスライドショーを表示したりするのに必要なライブラリをインストールします。
次に、これから記述するコードのスケルトン コードを追加します。
ng g component homePage
ng g component randomSlideshowPage
ng g component topBar
ng g class httpReqInterceptor
ng g service photo
これは、表示に使用するコンポーネントを作成するものです。 httpReqInterceptor クラスは、すべてのリクエストのリクエスト ヘッダーに API キーをアタッチするために使用されます。 Photo serviceは、Pexels APIを呼び出すためのコードが存在します。
environment.tsでは、あなたのAPIキーを他のファイルにインポートできるようにしました。
export const environment = {
production: false,
pexelsApiKey: 'your pexels api key'
};
In http-req-interceptor.ts, add:
This attaches our token to the Authorization request header of every request with this block:
let modifiedReq = req.clone({});
modifiedReq = modifiedReq.clone({
setHeaders: {
'Authorization': environment.pexelsApiKey
}
});
In photo.service.ts, put:
This lets us make the requests to the Pexels API.このブロックは、Pexels APIへのリクエストを行うためのものです。 私たちのアプリでは、ページネーション付きのキュレーションされた写真と検索のエンドポイントを使用しました。
次に、home-page.component.ts に:
ここにあるキュレーションされた写真のエンドポイントから写真を取得し、応答の写真フィールドで map を呼び出して画像 URL を取得します。
検索語が入力されると、ここで検索写真のエンドポイントを使用して map 関数と同じことを実行します。
home-page.component.html には次のように記述します。
これは検索フォームを表示し、フォト グリッドを無限スクロール div で囲んで、ユーザーが下にスクロールすると新しい画像を読み込むようにします。
infiniteScrollDistance はページの下からのページ位置の割合で、2 はページ内の現在のコンテンツの 98% をスクロールしたときに無限スクロールがトリガーされることを意味します。
infiniteScrollThrottle はユーザーのスクロールを停止してから無限スクロールがトリガーされるまでのミリ秒数です。 scrolledはユーザーがページを下にスクロールしたときに発動する。
home-page.component.scssでは、以下を追加しています:
.tile-image {
width: 100%;
height: auto;
}
これは画像をグリッドボックスいっぱいに表示させます。
random-slideshow-page.component.ts には、:
ここで、curated photos endpoint からランダムな写真を取得します。
random-photos-page.component.html には、:
これで写真のスライドショーが表示されるようになりました。
次に、menu-reducer.tsというファイルを作成し、メニューの状態を保存するために以下を追加します:
In reducers/index.ts, put:
import { menuReducer } from './menu-reducer';export const reducers = {
menu: menuReducer,
};
これにより、@ngrx/storeのStoreModuleが状態の保存にメニューのリデューサを使用することができます。
app.component.tsに、:
これにより、ページ変更時やメニューボタンをクリックしていない場合は、自動的に左側メニューが閉じられます。 メニューの状態をストアで取得し、ナビゲーションやメニュー外のクリックによってメニューを閉じる必要がある場合、メニューをオフに切り替え、ストアで状態を設定します。
top-bar.component.tsに:
これによりメニューを切り替え、ストアで状態を保存することが可能です。
In app.component.html, we have:
This shows the left side menu for navigation, and router-outlet lets users see our pages when clicking on the links above or typing the URL directly.
In app.component.scss, we add:
#content {
padding: 20px;
min-height: 130vh;
}ul {
list-style-type: none;
margin: 0;
li {
padding: 20px 5px;
}
}
This adds some padding and removed the margins on the pages.（ページ上に余白を追加する）とあるように、
in app.component.html は、ナビゲーション用の左側メニューを表示します。
最後に、app.module.ts に次のように入力します。
これには、すべてのライブラリ、HTTP インターセプター、およびアプリを機能させるために必要なサービスが含まれています。
最終的に、完成したアプリには次のようなものがあります。
