角度 6 - 使用运算符获取字符串@Input.值未知

Question

我有 2 个组件：父级和子级。

我有一个@Input运算符的子组件：

child.component.ts：

@Input() position: string;

孩子.html

<div>{{position}}</div>

然后在我的父组件上.html我有：

<app-child [position]="top-left"></app-child>

问题是它给了我错误，说它不知道"左上角"，所以它要求我将左上角的值添加到 parent.component.html。

我的问题是：

有没有办法让它接受在 [position]=" 上添加的值，而无需向 parent.component.ts 添加任何代码？

Answer 1

将父属性的值position括在单引号中。

<app-child [position]="'top-left'"></app-child>

第一个双引号表示角度，第二个表示字符串，因此角度将作为字符串变量传递左上角。所以基本上你需要的是

top-left即[position]=" 'top-left' "

Answer 2

将父属性的值position括在单引号中。

<app-child [position]="'top-left'"></app-child>

这会将值视为值而不是对变量的引用。