angular - 属性绑定(bind)不适用于括号

Question

我正在研究这个组件:

import { Component, Input} from '@angular/core';


@Component({
  selector: 'my-comp',
  template: `
    input is {{foo}}
  `
})
export class myComponent {
  @Input() foo: string;
}

在这里，如果我使用 <my-comp foo="bar> , 会显示“input is bar”，但是 <my-comp [foo]="bar>不会接受输入，只显示“输入是”

首先，如果没有刹车，属性(property)绑定(bind)如何工作？

Answer 1

我假设你想做的是

<my-comp [foo]="'bar'">

注意额外的一对引号。

如果您添加 []然后 Angular 将值计算为表达式。当没有属性时 bar在您的组件类上，或者它没有值，那么它将导致 undefined或 null .