Обернуть ControlValueAccessor в другой компонент - PullRequest
Новая
       25

Обернуть ControlValueAccessor в другой компонент

0 голосов
/ 06 апреля 2019

Для побочного проекта я создал новую реализацию ControlValueAccessor (матрица выбора AKA: таблица, в которой можно выбирать и отменять ячейки).Может быть предоставлен входной параметр для изменения поведения матрицы в ответ на взаимодействие с пользователем.

Я пытаюсь создать страницу «примеров» для перечисления нескольких элементов управления выбором матрицы с различными установленными параметрами (примерно так:https://material.angular.io/components/datepicker/overview). Для каждого примера я хотел бы показать связанное значение json, которое обновляется при взаимодействии пользователя с элементом управления и параметрами json.

Это просто, но повторяется (у меня многобольше вариантов, чем указано ниже): 

Matrix Selection Component
Basic

Json
{{data|json}}

Опции 

{{options||json}}

С метками

Json 

{{data|json}}

Опции 

{{options||json}}
...

Обратите внимание, что для каждого примера мне нужно вывести значения json и options.

В моей голове (вероятно, неправильно) я хотел бы сделать что-то вроде: 

<h1>Matrix Selection Component</h1>
<h2>Basic</h2>
<app-example>
   <app-matrix-selection [formControl]="peopleAttributesControl"></app-matrix-selection>
</app-example>

<h2>With Labels</h2>
<app-example>
   <app-matrix-selection [formControl]="peopleAttributesControl" [keys]="people" [selectables]="subjects" firstCellValue="Students / Subjects"></app-matrix-selection>
</app-example>
...

И определить AppExampleComponent таким образом, чтобы он мог выводить данные и параметры любого переданного компонента.в (не только матрица выбора, но и все остальное, что я мог бы определить с помощью указанных свойств).

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

Полагаю, другие способы достижения этого - это вариант 1: 

<h1>Matrix Selection Component</h1>
<h2>Basic</h2>
<app-matrix-selection [formControl]="peopleAttributesControl"></app-matrix-selection>
<app-example [data]="peopleAttributes"></app-example>

<h2>With Labels</h2>
<app-matrix-selection [formControl]="peopleAttributesControl" [keys]="people" [selectables]="subjects" firstCellValue="Students / Subjects"></app-matrix-selection>
<app-example [data]="peopleAttributes" [options]="withLabelsOptions"></app-example>
...

или вариант 2: 

<h1>Matrix Selection Component</h1>
<app-matrix-selection-example title="Basic" [data]="peopleAttributes"></app-matrix-selection-example>

<app-matrix-selection-example title = "With Labels" [data]="peopleAttributes" [keys]="people" [selectables]="subjects" firstCellValue="Students / Subjects" [data]="peopleAttributes" [options]="withLabelOptions"></app-matrix-selection>
...

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

Мне кажется, что здесь есть ключевая часть возможностей Angular, которую мне здесь не хватает,Если нет, то как бы вы подошли к этому?

1 Ответ

0 голосов
/ 07 апреля 2019

Решение первое - Использование ng-контента

Я забыл очень простую концепцию - контент для детей!Помогла следующая ссылка: https://medium.com/@tkssharma/understanding-viewchildren-viewchild-contentchildren-and-contentchild-b16c9e0358e

На мгновение забывая требование к данным и опциям, это приведет к: 

<app-example title="Basic">
    <app-matrix-selection [formControl]="peopleAttributesControl"></app-matrix-selection>
</app-example>

Пример компонента будет выглядеть следующим образом: 

<h2>{{title}}</h2>
<ng-content></ng-content>

ng-content выводит элементы, определенные с тегами элементов, на экран.

Решение второе - загрузчик динамических компонентов

Для части второй требований требуетсядинамическая загрузка компонентов: https://angular.io/guide/dynamic-component-loader

Переместив мои примеры в службу, я получил следующий шаблон: 

<h1>Matrix Selection Component</h1>
<app-example *ngFor="let example of examples" [title]="example.title" [example]="example"></app-example>

Намного чище!

Один изСвойства объекта-примера - это базовый тип компонента Angular, который можно динамически загружать с помощью ComponentFactoryResolver в компоненте app-example.Следуйте инструкциям в приведенной выше ссылке Angular.io.

Шаблонный пример компонента может затем позаботиться о повторяющейся структуре: 

{{title}}

Bound Data Json
{{ example.componentAttributes.data | json }}

Опции Json 

{{ example.componentAttributes.options | json }}

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

...