组件构造函数被 Angular 元素调用两次

Question

我正在开发一个递归查询构建器形式，它与 Angular 7中的反应形式类似。表示用户可以通过点击 继续添加并行规则Add rule，也可以通过点击 添加分组Add group。我创建了两个组件，QueryDesignerComponent并且QueryComponent. QueryDesignerComponent保存外部容器，带有AND和OR条件，并QueryComponent保存行输入，即LHS,operator和RHS。

1. 当用户单击时，我只需通过insideAdd rule再推送一个条目即可增长规则。我用 重复这一点。QueryComponentQueryDesignerComponent*ngFor
2. 当用户单击时，Add group我正在调用QueryDesignerComponentinside QueryComponent，这使得它递归。我用 重复这一点*ngFor。

我已经完成了实现，并且它在有角度环境的角度应用程序中运行良好。

现在，我正在尝试将此流程移植到Angular elements中，以使其可重用，无论环境如何。

这就是我将第一行 [ 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 被调用了两次，但是，我发现没有运气！

有谁知道我怎样才能摆脱这个问题？任何帮助/指导将不胜感激！

Answer 1

我也遇到了同样的问题，还有 Angular Elements。

问题是我在 Angular7 组件内调用 Angular7 组件，并且在 app.module.ts 上我引导了与 Angular7 组件名称相同的子组件。

当父组件调用 my-child-component 时，它同时调用 Angular7 组件和自定义元素组件。

因此，解决方法是在这种情况下使用不同的名称。