ルータアウトレット

908 views

ルータアウトレット

ルータアウトレット(Magic xpaの[サブフォーム]コントロール。[ルータアウトレット]プロパティが「True」)に対応したコントロールです。

Magic xpa 側に定義された[ルート]イベントの処理を実行します。

コンポーネントを配置すると、デフォルトで以下のコードが定義されます。[カード]コンポーネント内に配置されます。

<c-card data-comp-id=”router-outlet.1″ id=”router-outlet.1″> <router-outlet></router-outlet> </c-card>

以下のプロパティがあります。

ブレークポイント 内容

イベント&データ

Data Mapping

Magic プログラムで定義された[サブフォーム]コントロールを指定します。

歯車ボタン  をクリックすると項目一覧が表示されます。ここから[サブフォーム]コントロールを選択することができます。

Id

識別用のコードです。HTML 内で “id” の値として定義されます。

[アウトライン]タブ上で表示されます。

アウトレット名を指定します。

name

表示ロジック

Is Visible

コントロールを表示させるかどうか指定します。論理値を返す式で指定することもできます。

歯車ボタン  をクリックすると Angular関数の一覧が表示されます。ここから関数を指定して定義することができます。

ルーティング

ルートの新規作成

 アイコンをクリックすると、[ルートの追加]ダイアログが開きます。ここで、追加するルートを定義することができます。

修正/削除は、[コンポーネント]ペインで[ルートエディタ]を起動して行うことができます。

ダイナミックプロパティ

新規プロパティの追加

プロパティを新規追加します。

アイコンをクリックすることでプロパティを新規追加することができます。

属性(Attibute)とセレクタ(Selector)を入力して、このアイコンをクリックすることで追加されます。

セレクタは、すでに定義されているタグ(または空白)を指定してください。

このアイコンをクリックすると入力欄が閉じます。

例:

  • 属性:style

  • セレクタ:>(空白)

上記を追加すると、以下のように表示されます。

入力欄に、”background-color: yellow;”と入力することで[テンプレート]は以下のようになります。

<c-card id=”router-outlet.1″ data-comp-id=”router-outlet.1″ style=”background-color: yellow;”>

Share this Article

ルータアウトレット

Or copy link

CONTENTS