Элементы Angular v6 @Input () для начальной привязки не работают

Question

Я создал пользовательский элемент и поместил его на страницу следующим образом:

<my-custom-element [value]="100"></my-custom-element>

В определении компонента у меня есть это:

@Input() value: number = 50;

Во время выполнениязначение всегда 50. Я ожидаю, что оно будет 100. Если я удаляю значение по умолчанию, значение не определено.Чего мне не хватает?

Спасибо !!

Answer 1

В элементах NG вы можете не найти в своем OnIt, но в OnChanges.

Пожалуйста, добавьте строку ниже и убедитесь, что она определена.

public ngOnChanges(): void {
    console.log('on changes value: ', this.value);
}

Answer 2

Чтобы установить данные в Angular Elements, вы должны использовать vanilla js, query selector и назначить данные, как показано ниже

тег пользовательского элемента

<my-custom-element value ></my-custom-element>

выбрать пользовательский элемент с помощью селектора запросови присвоить значение.

var customElement = document.querySelector('my-custom-element');
customElement.value = 100;

Answer 3

Использование скобок оценивает то, что в кавычках, как выражение шаблона.Таким образом, в вашем сценарии Angular проверит, находится ли Object 100 в вашем классе компонентов.Поскольку 100 не является объектом, определенным в вашем классе компонентов, он не будет работать.Пропустите скобки, если вы хотите просто передать значение.

Обратите внимание, что приведенное ниже также решило бы вашу проблему, так как Angular распознает 100 как строку и просто передаст ее в Input () myCustomElement:

<my-custom-element [value]="'100'"></my-custom-element>