プラットフォームモジュール

本稿では、アングルCDKからプラットフォームモジュールを見ます.プラットフォームモジュールでは、OS、ブラウザ、レンダリングエンジンなどのWebアプリケーションが実行されている現在のプラットフォームについての情報を提供します.また、プラットフォームがスクロール動作などをサポートする機能についても情報を提供します.
これは、あなたのアプリケーションが実行されているプラットフォームを識別し、適切に角度アプリケーションの動作を変更することができます.CDKプラットフォームモジュールは以下の情報を利用できます.

はアンドロイドです- OSがアンドロイド

であるかどうか

はIOSです- OSがIOS

かどうか

はFirefoxです-ブラウザがFirefoxのかどうかを

です
ブラウザがエッジであるかどうかにかかわらず、

はEDGEです
ブラウザがサファリ

であるかどうかにかかわらず、Safariは

です

は点滅-レンダリングエンジンが点滅

かどうかです

はWebKitです－レンダリングエンジンがWebKit

であるかどうかにかかわらず

はトライデントです--レンダリング・エンジンがTridentであるかどうか

サポートされている入力タイプ-ブラウザ、すなわち番号、パスワード、ラジオ、範囲、リセット、検索、送信、tel、テキスト、時間、URLなどでサポートされている入力フォームフィールドタイプのリスト

ブラウザがScroll Behaviorをサポートするかどうか-

とブラウザがpassive event listenersをサポートしているかどうか.

インストール
糸の使用

$ yarn add @angular/cdk

糸を使ってインストール
NPMを使う

$ npm install @angular/cdk

NPMを使ってインストール

用途
まず、以下に示すように、アプリケーションモジュール内のPlatformModuleから@angular/cdk/platformをインポートする必要があります.

// other imports
import { PlatformModule } from '@angular/cdk/platform';

@NgModule({
  declarations: [
    AppComponent,
    // ... components
  ],
  imports: [
    // ... other modules
    PlatformModule,
  ],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

NB: If you are using feature or shared modules, you will need to import PlatformModule inside the module where the component using it is located.

次に、プラットフォーム情報を使用するコンポーネントにPlatformサービスを注入します.

import { Platform } from '@angular/cdk/platform';
// ... other imports

@Component({
 // ... component metadata
})
export class Component  {
  constructor(private platform: Platform) {}
}

最後に、以下のようにブラウザプラットフォーム情報を決定することができます.

this.platform.ANDROID; // check if OS is android
this.platform.FIREFOX // check if Browser is Firefox
this.platform.IOS; // check if OS is iOS
this.platform.BLINK; // check if render engine is Blink
this.platform.isBrowser; // check if the app is being rendered on the browser

APIの最新のリファレンスについては、公式Documents hereを参照してください.

例
我々は、モバイルデバイス、すなわちIOSとAndroidで、我々は、デスクトップ上のネイティブ共有を使用する我々のWebアプリの共有機能を実装するつもりです、我々は各ソーシャルメディアプラットフォームの共有ボタンを使用します.PlatformModuleおよびiOSにユーザがいるかどうかを決定するためにAndroidを使用し、WebShare APIを使用します.他のデバイスすなわちデスクトップについては、代わりに、単純なTwitterの共有ボタンを表示します.以下に、コンポーネントの構成を示します.

import { Platform } from '@angular/cdk/platform';

@Component({
  selector: 'app-social-share',
  templateUrl: './social-share.component.html',
  styleUrls: ['./social-share.component.scss'],
})
export class SocialShareComponent implements OnInit {
  @Input()
  shareUrl: string;

  @Input()
  title: string;

  @Input()
  text: string;

  @Input()
  hashtags: string;

  tweetShareUrl: string;

  isNativeShareSupported = false;

  constructor(private platform: Platform) {}

  ngOnInit(): void {
    // show native share if on Android and IOS and if it is supported
    this.isNativeShareSupported =
      navigator.share && (this.platform.ANDROID || this.platform.IOS);
    const baseUrl = 'https://twitter.com/intent/tweet';
    this.tweetShareUrl = `${baseUrl}?url=${this.shareUrl}&via=mwycliffe_dev&text=${this.title}&hashtags=${this.hashtags}`;
  }

  async nativeShare() {
    if (navigator.share) {
      await navigator.share({
        title: this.title,
        text: this.text.substr(0, 200),
        url: this.shareUrl,
      });
    }
  }
}

上記の共有コンポーネントにはisNativeShareSupportedというプロパティがあります.現在のブラウザがネイティブ共有をサポートしているかどうかをチェックし、プラットフォームがIOSまたはAndroidであることを確認します.次に、次のように、このプロパティを使用して正しいUIを表示できます.

<ng-container *ngIf="isNativeShareSupported; else showSocialShareButton">
  <a (click)="nativeShare()" class="space-x-2">
    <span>Share this article</span>
  </a>
</ng-container>

<ng-template #showSocialShareButton>
  Share on this article: <a target="_blank" [href]="tweetShareUrl">Twitter</a>
</ng-template>

結論
この記事では、我々はどのように我々のアプリが実行されているプラットフォームの詳細をチェックするためにCDK booleanを使用する方法を学びました.これは、使用されているプラットフォームに基づいて、角度のアプリの動作を変更するためのシンプルで非常に便利な方法です.これは、強化された機能へのアクセスなしにユーザーに適切なフォールバックを提供しながら、それらにアクセスするユーザーに拡張機能を有効にすることができるように改善UXにつながることができます.

リンク

プラットフォームモジュールのCDKドキュメント.

は、ウェブ共有APIでOS共有UIと統合します.

は、パフォーマンスを向上させるためにパッシブリスナーを使用しません.

スクロールふるまい- Link .

角型CDKを用いた再利用可能なモーダルオーバレイ/ダイアログの構築方法

アングルCDKを使用してカスタムステッパーを構築します.