Проблемы с компонентом-оберткой в ​​Angular 6

Question

Я хочу создать компонент-обертку для saturn-datepicker, поскольку сейчас планируется использовать его в нескольких различных приложениях и, возможно, отключить его позже.Я совсем новичок в Angular, но разветвился и создал «рабочий» пример из Stackblitz, который я нашел здесь .

Проблема в том, что он работает только врежим редактирования - когда я пытаюсь запустить код в VS Code или по обычной ссылке, я получаю сообщение об ошибке

ERROR DOMException: Failed to execute 'setAttribute' on 'Element': '#' is 
not a valid attribute name.

Я думаю, это связано с тем, как я задаю имя для ввода -и это, вероятно, связано с начальным стеком, устанавливаемым с Angular 5?Любые указатели о том, как это исправить, будут с благодарностью.Кроме того, какова лучшая практика для извлечения данных (таких как startdate, enddate) из различных дочерних элементов?

Редактировать: я пытаюсь создать «обертку» вокруг средства выбора даты, чтобы его можно было реализоватьи используется в приложениях сейчас, но позже заменяется другим (изменение только кода внутри оболочки, а не в самих приложениях).В данный момент этот случай относится только к DatePicker, но возможно, что то же самое потребуется для других библиотек позже.

Answer 1

Давайте рассмотрим порядок, в котором происходят вещи:

1. Компонент создан.
2. Ваш шаблон загружен.На этом этапе также выполняется интерполяция.
3. Ваши свойства @Input обрабатываются и получают их значения с сайта вызова.

И это проблема.К моменту загрузки шаблона значение name еще не определено.Это оставляет вас с этим недопустимым шаблоном Angular:

Смысл, который Кракен сделал (я думаю), состоял в том, что даже если имя переменной шаблона будет успешно заменено в вашем шаблоне, оно не будетможно использовать на сайте вызова.

Вы можете иметь это:

<form>
  <app-datepicker-component name="one"></app-datepicker-component>
  <br><br>
  <app-datepicker-component name="two"></app-datepicker-component>
</form>

Но что тогда?@ViewChild не найдет компонент, потому что он недоступен за пределами <app-datepicker>.

Возможно, если вы предоставили небольшой контекст, мы можем помочь найти решение проблемы, которую вы пытаетесьрешить.

Answer 2

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

<sat-datepicker #${name} [rangeMode]="true">

Вы не можете делать такие вещи на вашем кодешаблон.Это совершенно бессмысленно.Логика вашего hello.component полностью инкапсулирована из компонентов внешнего мира.Вам не нужно менять внутренние компоненты этого компонента.Вам просто нужно послушать, что будет с вашим привет-компонентом Output.

Вам следует дать имя, дать вашему входу имя обычным образом, как это

<sat-datepicker #name [rangeMode]="true">

И все остальные ${name}, потому что это неправильно .

В любом случае вы не можете получить к нему доступ из родительских компонентов, чтобы использовать некоторые динамические имена.В некоторых случаях вы делаете, но это довольно продвинутый и специфический для проблемы.