Angular 6 - 使用@Input 运算符获取字符串。价值未知

Question

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

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

child.component.ts:

@Input() position: string;

child.comppnent.html

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

然后在我的 parent.component.html 我有：

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

问题是它给我错误提示它不知道 "top-left" 所以它要求我将左上角的值添加到 parent.component.html.

我的问题是：

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

Answer 1

将 parents 属性 position 的值用单引号括起来。

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

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

Answer 2

将 parents 属性 position 的值用单引号括起来。

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

第一个双引号是 angular 第二个表示字符串，所以 angular 将把你的 top-left 作为字符串传递 variable.So 基本上你需要的是

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

Angular 6 - Getting string with @Input operator. Value not known