web-dev-qa-db-ja.com

Angular 2で "String"値を "Type"に変換する方法

ionic 2アプリケーションでサイドメニューを作成します。ここで、ページナビゲーションコンポーネントは、menuService.getMenu関数を使用してフェッチされた外部jsonファイルに配置されます。

私のJSON構造：

"menu":[
        {
          "title":"Grid",
          "component":"GridPage"
        }
      ]

私のTs：

    this.menuService.getMenu().then((menu) => {
    this.menu = menu;
    });

    openPage(menu) {
      console.log("menu", menu.component);
      nav.setRoot(menu.component);
    }

コンソールログは、文字列GridPageを出力します。 TypeをType（menu.component）として使用して変換しようとしました。しかし、コンソールでの私の結果は、匿名の名前を持つ関数です。誰かがナビゲーションを機能させるためにjson文字列をコンポーネント「Type」に変換するのを手伝ってください。

typescriptangularionic2
7
AishApp

文字列でクラスの型を取得する方法があると思いますが、わかりません（TSは使用していません）。簡単な回避策は次のとおりです。

文字列からタイプへのマップを作成する

classes = {
  'MyClass1': MyClass1,
  'MyClass2': MyClass2,
  'Grid': Grid
}

次に、タイプを調べます

class['Grid']

欠点は、サポートされているすべてのクラスを事前に知っておく必要があることです。

10
Günter Zöchbauer

Angular 2の深さはわかりませんが、適切に構造化されたアプリケーションでは、文字列を使用して型を取得するのは簡単で実行可能です。ifあなたは完全に知っています指定されたタイプの修飾名：

let typeName = "GridPage";
let ComponentType = MyApp.Components[typeName];

次のタイプエラーが発生した場合：

オブジェクトタイプのインデックスシグネチャには、暗黙的に「any」タイプがあります。

...次に、前の名前空間（オブジェクト）を型キャストする必要があります。この場合、anyをアサートすることをお勧めします。これは、文字列ベースのインデックス署名のインラインインターフェイスを定義するよりも短く、型の安全性を事実上失うことがないためです。

let ComponentType = (MyApp.Components as any)[typeName];

さらに、このアプローチはモジュールでも完全に機能します。

import * as Components from "./components";

let ComponentType = (Components as any)[typeName];
5
John Weisz