[解決済み] Angular 2でコンポーネントの静的変数をHTMLにバインドする方法は?
2023-01-22 22:55:23
質問
HTMLページでコンポーネントの静的変数を使用したいです。 angular2でコンポーネントの静的変数をHTML要素にバインドする方法を教えてください。
import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs/Rx';
@Component({
moduleId: module.id,
selector: 'url',
templateUrl: 'url.component.html',
styleUrls: ['url.component.css']
})
export class UrlComponent {
static urlArray;
constructor() {
UrlComponent.urlArray=" Inside Contructor"
}
}
<div>
url works!
{{urlArray}}
</div >
どのように解決するのですか?
コンポーネントテンプレート内のバインド式のスコープは、コンポーネントクラスのインスタンスです。
グローバルやスタティックを直接参照することはできません。
回避策として、コンポーネントクラスにゲッターを追加することができます。
export class UrlComponent {
static urlArray;
constructor() {
UrlComponent.urlArray = "Inside Contructor";
}
get staticUrlArray() {
return UrlComponent.urlArray;
}
}
といった感じで使います。
<div>
url works! {{staticUrlArray}}
</div>
関連
-
[解決済み] Angular 2の「コンポーネント」は既知の要素ではありません。
-
[解決済み] Angular HTMLバインディング
-
[解決済み] コンポーネントテンプレートで要素を選択するには?
-
[解決済み] Angularの@Directiveと@Componentの比較
-
[解決済み] コンポーネントクラスからテンプレート参照変数にアクセスする
-
[解決済み] AngularでEventEmitterに2つのパラメータを渡すには?
-
[解決済み] AngularでFormArrayからすべての項目を削除する
-
[解決済み] Typescript におけるインターフェースとクラスの違い
-
[解決済み] エラー TS1192: モジュール '" A.module"' はデフォルトのエクスポートがありません。
-
[解決済み] Tslint - type trivially inferred - なぜここに型を入れるのはバッドプラクティスなのですか?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] Angular 4/5/6 グローバル変数
-
[解決済み] Angular Materialでのデフォルトのソート - ヘッダーのソート
-
[解決済み] AngularでEventEmitterに2つのパラメータを渡すには?
-
[解決済み] Angular CLIで特定のバージョンのAngularをインストールするには?
-
[解決済み] Error: モジュールによってインポートされた予期しない値 'undefined'。
-
[解決済み] Angular2ルートでAngularの方法でパラメータを取得するには?
-
[解決済み] ExpressionChangedAfterItHasBeenCheckedError: チェックされた後に、式が変更されました。以前の値: 'undefined'
-
[解決済み] コンストラクタ注入を行わずにサービスのインスタンスを取得する
-
[解決済み] Uncaught Error: Unexpected module 'FormsModule' declared by the module 'AppModule'. Pipe/@Directive/@Component アノテーションを追加してください。
-
[解決済み] Angular Material 2 ネストされたオブジェクトによるデータテーブルのソート