何时在指令@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 看起来像这样:

if my html will look like this:

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

输出将是:

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

如果我从 myText 中删除 []:

If I REMOVE the [] from 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 的用户永远不需要怀疑是否如果没有，我认为方括号 [] 应该始终存在.不是吗?

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?

推荐答案

当你使用 [] 绑定到一个 @Input() 时，它基本上是一个模板表达式.

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

以同样的方式显示 {{abc}} 不会显示任何内容(除非您实际上有一个名为 abc 的变量).

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

如果你有一个字符串 @Input()，并且你想把它绑定到一个常量字符串，你可以这样绑定:[myText]=" 'some text'"，或者简而言之，就像一个普通的 HTML 属性:myText="some text".

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

[myEnabled]="true" 起作用的原因是因为 true 是一个有效的模板表达式，当然它的计算结果为布尔值 true.

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

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