Angular: 括号语法在提供输入值时不起作用？

Question

使用方括号语法提供输入值无效。但是，当我删除括号时，它确实如此。这是为什么？

子组件：

@Component({
  selector: 'app-child',
  template: `<p>My name is {{name}}</p>`,
})
export class ChildComponent  {
  @Input() name;
}

父组件模板 - 这不起作用，为什么？？：

<p>Parent component</p>

<app-child [name]='Peter'></app-child>

父组件模板-本作品的：

<p>Parent component</p>

<app-child name='Peter'></app-child>

Answer 1

Parent component template - this doesn't work, why??:

Parent component

<app-child [name]='Peter'></app-child>

此处，angular 查找名为 Peter 的变量，该变量不存在。如果将其更改为

<app-child [name]="'Peter'"></app-child>

它将按预期工作。

此外，来自 Angular docs:

You should omit the brackets when all of the following are true:

The target property accepts a string value.

The string is a fixed value that you can put directly into the template.

This initial value never changes.

Angular: 括号语法在提供输入值时不起作用？

Angular: bracket syntax doesn't work when providing input values?

angular

typescript

property-binding