ディレクティブ @Inputs で角括弧 [ ] を使用する場合と使用しない場合とは?
2023-10-28 16:48:03
質問
少し混乱しています。
この簡単なディレクティブを見てください。
@Directive({
selector: '[myDirective]'
})
export class MyDirective {
private text: string;
private enabled: boolean;
@Input() myDirective:string;
@Input('myText')
set myText(val: string) {
this.text = val;
}
@Input('myEnabled')
set myEnabled(val: boolean) {
this.enabled = val;
}
ngOnInit() {
console.log("myDirective string: " + this.myDirective);
console.log("myText string: " + this.text);
console.log("myEnabled boolean: " + this.enabled);
}
}
とすると、私のhtmlはこのようになります。
<div [myDirective]="myDefaultText" [myEnabled]="true" [myText]="abc"></div>
と出力されます。
myDirective string: myDefaultText real value // good
myEnabled boolean: true // good
myText string: undefined // Why?
から[]を取り除くと
myText
:
<div [myDirective]="myDefaultText" [myEnabled]="true" myText="abc"></div>
と出力されます。
myDirective string: myDefaultText real value // good
myEnabled boolean: true // good
myText string: abc // GOOD
を削除することもできますね。
[]
から
myEnabled
と入力すれば、それも動作します。
そこで、私が混乱しているのは、角括弧を使用する必要がある場合です。
[]
を使うべきときと、そうでないときがあるのですが、私は、ユーザーが
myDirective
を使おうとしているユーザーが、もしやと思ったり、もしやと思ったりする必要がないように、私は角括弧の
[]
は、常にそこにあるべきものです。そうでしょう?
どのように解決するのですか?
を使用する場合
[]
にバインドするために
@Input()
というように、基本的にはテンプレート式です。
を表示するのと同じように
{{abc}}
と表示しても何も表示されません(実際に
abc
).
もし、文字列
@Input()
という文字列があり、それを定数文字列に束ねたい場合、次のように束ねることができます。
[myText]=" 'some text' "
つまり、通常の HTML 属性と同じです。
myText="some text"
.
その理由は
[myEnabled]="true"
が機能したのは
true
は有効なテンプレート式で、もちろんブール値の
true
.
関連
-
[解決済み] JSX.ElementとReactNodeとReactElementの使い分けは?
-
[解決済み] TypeScriptのファイル変更時にts-nodeを監視して再読み込みする方法
-
[解決済み】プロパティ「...」にはイニシャライザがなく、コンストラクタで確実に代入されない
-
[解決済み】InjectableクラスのInstantiated時にngOnInitが呼ばれない。
-
[解決済み】TypeScript / AngularでInterfaceとModelを使い分けるタイミングについて
-
[解決済み】Angular - サービスとコンポーネントでパイプを使用する
-
[解決済み] ng buildの後にangular-cliのdist-folderのパスを変更するには?
-
[解決済み] 角度2 ngfor 最初、最後、インデックスループ
-
[解決済み] Angular CLIで特定のバージョンのAngularをインストールするには?
-
[解決済み] エラー TS1192: モジュール '" A.module"' はデフォルトのエクスポートがありません。
最新
-
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 2のボタンで別ページに移動する
-
[解決済み] ng serve がファイルの変更を自動的に検出しない
-
[解決済み] パイプ ' ' が見つかりません。
-
[解決済み] ルーターナビゲートで同じページのngOnInitを呼び出さない
-
[解決済み] AngularでFormArrayからすべての項目を削除する
-
[解決済み] FormGroupから単一の値を取得する方法
-
[解決済み] angular-cli が HTTPS で ng serve するようにする。
-
[解決済み] コンポーネントではなくクラスにサービスをインジェクトする方法
-
[解決済み] Angular2 Tutorial (Tour of Heroes)です。モジュール 'angular2-in-memory-web-api' を見つけることができません。
-
[解決済み] Angular 2+でspec.tsファイルなしでComponentを生成する。