何时在指令@Inputs中使用方括号[],何时不使用？

Question

我有点困惑.

看到这个简单的指令:

 @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永远不需要怀疑是否,但我认为方括号[]应该始终存在.不是吗？

Answer 1

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

显示相同的方式{{abc}}不会显示任何内容(除非您实际调用了一个变量abc).

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

之所以[myEnabled]="true"有效,是因为它true是一个有效的模板表达式,当然它的结果是布尔值true.

Answer 2

括号告诉Angular评估模板表达式.如果省略括号,Angular会将字符串视为常量,并使用该字符串初始化target属性.它没有评估字符串!

不要犯下列错误:

    <!-- ERROR: HeroDetailComponent.hero expects a
         Hero object, not the string "currentHero" -->
    <hero-detail hero="currentHero"></hero-detail>

检查:https://angular.io/docs/ts/latest/guide/template-syntax.html# !#property-binding

Answer 3

我想我知道您的困惑来自何处。当您说时，[myText]="abc"您期望的myText是在我的组件中定义的属性，我想将其初始化为abc。但这是不正确的。但是首先，让我们进一步了解HTML。

在HTML中，您可以定义这样的元素。

<input type="text" value="Bob">

输入是attributes类型和值均相同的元素。当您的浏览器对此进行解析时，它将为此元素创建一个DOM条目（一个对象）。DOM条目将包含propertiesalign，baseURI，childNodes，children等。因此，这就是HTML属性和DOM属性之间的区别。请参阅参考资料。有时，属性和属性具有相同的名称，这会引起混淆。对于上面的输入标记，它具有value= Bob属性value，并且还具有一个属性，该属性的值将与您在文本框中键入的值相同。总而言之，属性是您定义的有关标记的属性，属性是在DOM树中生成的内容。

您需要知道这一点的原因是，在Angular的世界中，属性的唯一作用是初始化元素和指令状态。编写数据绑定时，您仅在处理目标对象的属性和事件。HTML属性实际上消失了。

这就是说，如果编写<img [src]="heroImageUrl">它，src则意味着它不是属性，而是property在img的DOM内部定义的。右侧heroImageUrl是模板表达式。

[myText]="abc"和之间的简单区别myText="abc"是，在前者中，您要求angular设置PROPERTY myText，在后者中，您要创建一个名为myText的ATTRIBUTE，此属性将具有其自己的DOM属性。Angular不处理属性。

综上所述，<div [myDirective]="myDefaultText" [myEnabled]="true" [myText]="abc"></div>您在本质上是在说：

1. 将指令myDirective应用于我的div元素。
2. 将变量绑定myEnabled到右侧的表达式。该表达式表示true，因此myEnabled的值为true。
3. 将变量绑定myText到右侧的表达式。表情说abc。是否定义了abc？否，因此表达式的计算结果为undefined。

Answer 4

绑定[]是针对对象的,没有它,值就是字符串.关注类型.

在代码中

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

你试图绑定对象,但对象不可用,因此它的值是undefined.另一方面,如果删除绑定,则对象消失,您只有一个string值分配给该属性.

Answer 5

来自Angular 属性绑定指南：

方括号 [] 使 Angular 将赋值的右侧计算为动态表达式。如果没有方括号，Angular 会将右侧视为字符串文字，并将属性设置为该静态值。

Answer 6

这是 Angular 13 的最新更新。

让我们举个例子...

假设我们有一个名为 的输入变量carImage，它将包含从父级传递的动态 URL 值。

@Input() carImage = '';

场景 1 -使用方括号

<img [src]="carImage"></img>

在这种情况下，无论变量持有什么值都carImage将被分配给src的属性img。这是property binding我们可以动态设置属性值的地方。

场景 2 -没有方括号

<img src="carImage"></img>

在这种情况下，字符串carImage将直接分配给src属性，因此 Angular 将无法显示图像，因为它是无效的 URL。

要使其正常工作，您必须分配一个有效的 URL，如下所示。

<img src="http://demo/carImage.jpg"></img>