angular - 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>

score 1 · Accepted Answer

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

父组件

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

在这里，angular 查找一个名为Peter的变量，该变量不存在。如果您将其更改为

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

它将按预期工作。

此外，来自 Angular文档：

当满足以下所有条件时，您应该省略括号：

目标属性接受一个字符串值。

字符串是一个固定值，您可以直接放入模板中。

这个初始值永远不会改变。

1 回答 1