Я работаю над формой построителя рекурсивных запросов, которая похожа на this , в angular 7, с реактивной формой .Значит, пользователь может продолжать добавлять параллельное правило, нажимая Add rule, и может добавлять группу, нажимая Add group.Я создал два компонента, QueryDesignerComponent и QueryComponent.QueryDesignerComponent содержит внешний контейнер с условиями AND и OR, а QueryComponent содержит ввод строки, то есть LHS, operator и RHS.
- Когда пользователь нажимает
Add rule Я расширяю правило, просто нажимая еще одну запись с QueryComponent внутри QueryDesignerComponent.Я повторяю это с *ngFor. - Когда пользователь нажимает
Add group, я называю QueryDesignerComponent внутри QueryComponent, что делает его рекурсивным.Я повторяю это с *ngFor.
Я закончил с реализацией и ее работой нормально в угловом приложении, которое имеет угловую среду.
Теперь я пытаюсь перенести этот поток в угловых элементов , чтобы сделать его многоразовым, независимо от среды.
вот как я размещаю первый ряд [QueryComponent] внутри QueryDesignerComponent,
<div class="qd--criteria">
<div class="row qd--body qd--clear-margin-lr">
<div class="col-md-12 qd--condition-container">
<query [data]="data" [operators]="operators" [(queryForm)]="queryForm"></query>
</div>
</div>
</div>
и таким образом я управляю параллельным запросом и группами внутри QueryComponent,
<!--Top level container for query view | everything related should go here: start-->
<div class="qd--query-container" [formGroup]="queryForm" *ngIf="queryForm">
<div class="row" formArrayName="queries">
<!--Repeat the dynamically added/removed queries: start-->
<div class="col-md-12 qd--query-inputs-container" *ngFor="let query of currentQueries.controls; let queryIndex = index">
<div class="row qd--query-inputs" [formGroupName]="queryIndex">
<!--Actual query inputs: start-->
<div class="col-md-10 qd--condition-holder">
<div class="row no-gutter">
<!--Left hand side input: start-->
<!--Left hand side input: end-->
<!--Operator: start-->
<!--Operator: end-->
<!--Right hand side input: start-->
<!--Right hand side input: end-->
</div>
</div>
<!--Actual query inputs: start-->
<!--Group options: start-->
<!--Group options: end-->
<!--Group query: start-->
<div *ngIf="query !== undefined" class="ai--query-groups">
<div *ngFor="let group of getGroups(query).controls; let groupIndex=index" class="ai--query-group">
<query-designer
[data]="data"
[operators]="operators"
[queryForm]="group"
(removeQueryGroup)="removeQueryGroupHandler($event)"
[queryIndex]="queryIndex"
[groupIndex]="groupIndex"></query-designer>
</div>
</div>
<!--Group query: end-->
</div>
</div>
<!--Repeat the dynamically added/removed queries: end-->
</div>
</div>
<!--Top level container for query view: start-->
<!--Repeat the dynamically added/removed queries: start-->
<div class="col-md-12 qd--query-inputs-container" *ngFor="let query of currentQueries.controls; let queryIndex = index">
<div class="row qd--query-inputs" [formGroupName]="queryIndex">
<!--Actual query inputs: start-->
<div class="col-md-10 qd--condition-holder">
<div class="row no-gutter">
<!--Left hand side input: start-->
<!--Left hand side input: end-->
<!--Operator: start-->
<!--Operator: end-->
<!--Right hand side input: start-->
<!--Right hand side input: end-->
</div>
</div>
<!--Actual query inputs: start-->
<!--Group options: start-->
<!--Group options: end-->
<!--Group query: start-->
<div *ngIf="query !== undefined" class="ai--query-groups">
<div *ngFor="let group of getGroups(query).controls; let groupIndex=index" class="ai--query-group">
<query-designer
[data]="data"
[operators]="operators"
[queryForm]="group"
(removeQueryGroup)="removeQueryGroupHandler($event)"
[queryIndex]="queryIndex"
[groupIndex]="groupIndex"></query-designer>
</div>
</div>
<!--Group query: end-->
</div>
</div>
<!--Repeat the dynamically added/removed queries: end-->
Вот как я создаю собственный угловой элемент,
@NgModule({
imports: [
CommonModule,
BrowserModule,
NgSelectModule,
FormsModule,
ReactiveFormsModule,
CoreModule
],
declarations: [
AppComponent,
QueryComponent,
QueryDesignerComponent
],
entryComponents: [QueryDesignerComponent],
providers: []
})
export class AppModule {
constructor(private injector: Injector) {
const strategyFactory = new ElementZoneStrategyFactory(QueryDesignerComponent, injector);
const customElement = createCustomElement(QueryDesignerComponent, { injector, strategyFactory });
customElements.define('query-designer', customElement);
}
ngDoBootstrap() { }
}
При первом рендеринге все работает нормально, и я могу добавить n количество параллельных рядов.Но когда я щелкаю Add group, конструктор QueryDesignerComponent вызывается дважды!Это делает первый экземпляр QueryDesignerComponent для получения undefined и второй экземпляр для получения правильных значений.
Я следовал , почему ngOnInit вызывался дважды? , связанная с проблема github и ngOnInit и Constructor вызываются дважды , но я не нашел удачи !!
Кто-нибудь знает, как я могу избавиться от этой проблемы?Любая помощь / руководство будет высоко ценится!