ng-content select не работает "<element> не известный элемент"

Question

Я следую этому учебнику примерно так:

<div class="app-autocomplete">    
  <mat-form-field>
    <mat-form-field>
      <div class="app-autocomplete-input">
        <ng-content select="app-autocomplete-input"></ng-content>
      </div>
    </mat-form-field>
    <button mat-icon-button type="button" [disabled]="disabled">
      <mat-icon>clear</mat-icon>
    </button>
  </mat-form-field>

  <!-- ... --> 
</div>

Но я получаю

Uncaught Ошибка: Ошибки синтаксического анализа шаблона: 'app-autocomplete-input 'не является известным элементом:

1. Если' app-autocomplete-input 'является угловым компонентом, то убедитесь, что он является частью этого модуля.
2. Если 'app-autocomplete-input' является веб-компонентом, то добавьте 'CUSTOM_ELEMENTS_SCHEMA' к '@ NgModule.schemas' этого компонента, чтобы подавить это сообщение.("[ОШИБКА ->] ...

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

Вот как я пытаюсьиспользовать app-autocomplete:

<app-autocomplete>          
  <app-autocomplete-input>
    <input placeholder="Yo"/>
  </app-autocomplete-input>          
</app-autocomplete>

Answer 1

Цель

Фактическая цель - использовать Content Projection для дальнейшей настройки компонента при использовании.

Issue

Основная проблема заключается в использовании пользовательского компонента app-autocomplete-input, который нигде не предоставляется.

Исправление

Поскольку у вас нет пользовательского компонента и никогдапредназначен иметь пользовательский компонент.Вы используете простой HTML-тег, такой как div span, или вы можете использовать класс CSS ex autocomplete-input.

Модифицированный код

<div class="app-autocomplete">    
  <mat-form-field>
    <mat-form-field>
      <div class="app-autocomplete-input">
        <ng-content select=".app-autocomplete-input"></ng-content>
      </div>
    </mat-form-field>
    <button mat-icon-button type="button" [disabled]="disabled">
      <mat-icon>clear</mat-icon>
    </button>
  </mat-form-field>

  <!-- ... --> 
</div>

app-autocomplete.html

<app-autocomplete>          
  <div class="app-autocomplete-input">
    <input placeholder="Yo"/>
  </div>          
</app-autocomplete>