данные угловых передач в компонент, созданный и скомпилированный на лету - PullRequest
Новая
       34

данные угловых передач в компонент, созданный и скомпилированный на лету

0 голосов
/ 24 октября 2019

Базовый компонент ввода создается на лету 

const compTag = 'my-input';
const template = `<${compTag}></${compTag}>`;

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

поэтому, передав ему formControlName=${config.name}: 

const template = `<${compTag} formControlName="${config.name}"></${compTag}>`;

в моем компоненте «на лету», передается следующее, чтобы элемент управления нашел его родителя: 

viewProviders: [{
  provide: ControlContainer,
  useExisting: FormGroupDirectiv
}],

Verbose: 

const tmpCmp = Component({
  template,
  viewProviders: [{
    provide: ControlContainer,
    useExisting: FormGroupDirective
  }],
})(class {});

, который позже разрешается в DOM как: 

<ng-component>
  <my-input formcontrolname="a" ng-reflect-name="a" class="ng-untouched ng-pristine ng-valid">
    <input/>
  </my-input>
</ng-component>

Проблема заключается в том, что я пытаюсь передать любые данные конфигурации объекта дочернему компоненту в шаблоне:

const template = `<${compTag} formControlName="${config.name}" config=${config}></${compTag}>`;

config передается компоненту, но не анализируется должным образом и принимается как config: [Object object]

. Кто-нибудь сталкивался?

1 Ответ

0 голосов
/ 24 октября 2019

так этот пост был чрезвычайно полезен.

Таким образом, компонент-обертка был освобожден, а formControlName был непосредственно присоединен к созданному компоненту.

расширенный ответ:

что formControlName делает для каждого объявления сверху (например, <my-input formControlName="myControl"></my-input>

, то же самое делает класс NgControl снизу, расширяя класс AbstractControlDirective.

, который он принимаетпараметр 'name', который является Name в formControlName, и, расширяя этот класс с помощью Directive, вы можете назначить сам компонент функции valueAccessor изнутри.

соединениесделано здесь (взято из связанного поста): 

const component = this.resolver.resolveComponentFactory<any>(components[this.config.type]);
this.name = this.config.name; // formControlName="..."
this.component = this.container.createComponent(component);
this.component.instance.config = this.config;
this.valueAccessor = this.component.instance; // The part where NgControl is connected via ControlValueAccessor to your component.
this._control = this.formDirective.addControl(this); // The part where the control knows which is its parent in the `ReactiveForm`
...