何时在指令@Inputs中使用方括号[]，何时不使用方括号[]? [英] When to use square brackets [ ] in directives @Inputs and when not?

问题描述

我有点困惑.

请参阅以下简单指令:

 @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.

I'm confused a little.

See this simple directive:

 @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);
    }
}

if my html will look like this:

<div [myDirective]="myDefaultText" [myEnabled]="true"  [myText]="abc"></div>

The output will be:

myDirective string: myDefaultText real value  // good
myEnabled boolean: true                       // good
myText string: undefined                      // Why?

If I REMOVE the [] from myText:

<div [myDirective]="myDefaultText" [myEnabled]="true"  myText="abc"></div>

The output will be:

myDirective string: myDefaultText real value  // good
myEnabled boolean: true                       // good
myText string: abc                            // GOOD

I can also remove the [] from myEnabled and it will work too. So here is my confusion - when I need to use square brackets [] and when not, while I want the user who is going to use myDirective will never need to wonder if or if not, I think the square brackets [] should always be there. Aren't they?

解决方案

When you use [] to bind to an @Input(), it's basically a template expression.

The same way displaying {{abc}} wouldn't display anything (unless you actually had a variable called abc).

If you have a string @Input(), and you want to bind it to a constant string, you could bind it like this: [myText]=" 'some text' ", or in short, like a normal HTML attribute: myText="some text".

The reason [myEnabled]="true" worked is because true is a valid template expression which of course evaluates to the boolean true.

这篇关于何时在指令@Inputs中使用方括号[]，何时不使用方括号[]?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！