Angular 6 - Получение строки с оператором @Input.Значение не известно

Question

У меня есть 2 компонента: Parent и Child.

I дочерний компонент У меня есть оператор @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», поэтому просит добавить значение top-left в 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>

Это значение будет обрабатываться как значение, а не как ссылка на переменную.