1. ホーム
  2. angular

ディレクティブ @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 .