В угловых шаблонах эталонные переменные должны быть уникальными для каждого вида.
Представления могут быть двух типов Вид и EmbeddedView . Шаблоны, которые мы пишем в структурных директивах (внутри тега ng-template
или *ngFor
), представляют собой встроенные представления. Таким образом, мы можем иметь одно и то же имя переменной ссылки на шаблон в разных ng-шаблонах.
Пример см.
Давайте представим, что у нас есть AppComponent
и записано в шаблоне:
<ui-switcher>
<web>
<!-- some commented details -->
<input class="form-control mr-2" #searchInput
type="text" (keyup)="this.search(searchInput.value)">
</web>
<mobile>
<!-- some commented details -->
<input class="form-control" #searchInput
type="text" (keyup)="this.search(searchInput.value)">
</mobile>
</ui-switcher>
Angular рассматривает его как один AppComponentView, поскольку в этом шаблоне нет структурных директив. Оба входа принадлежат одному и тому же виду.
Теперь, когда Angular compiler анализирует этот шаблон, он создает по одному ViewBuilder на представление с refNodeIndices свойством:
private refNodeIndices: {[refName: string]: number} = Object.create(null);
, который содержит все ссылки в текущем шаблоне.
Давайте воспроизведем ваш случай:
Мы видим, что вторая ссылочная переменная шаблона переопределяет предыдущую.
И в результате Angular обрабатывает событие клика для того же элемента: