我试图创建新的组件,但它的ngOnInit()方法被调用两次,我不知道为什么会发生这种情况？这里我创建了一个名为ResultComponent的组件,它从名为mcq-component的父组件中获取@Input. 这是代码:
父组件(MCQComponent)
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'mcq-component',
template: `
<div *ngIf = 'isQuestionView'>
.....
</div>
<result-comp *ngIf = '!isQuestionView' [answers] = 'ansArray'><result-comp>
`,
styles: [
`
....
`
],
providers: [AppService],
directives: [SelectableDirective, ResultComponent]
})
export class MCQComponent implements OnInit{
private ansArray:Array<any> = [];
....
constructor(private appService: AppService){}
....
}
子组件(result-comp)
import { Component, OnInit, Input } from '@angular/core';
@Component({
selector:'result-comp',
template: `
<h2>Result page:</h2>
` …我正在开发一个递归查询构建器形式，它与 Angular 7中的反应形式类似。表示用户可以通过点击 继续添加并行规则Add rule，也可以通过点击 添加分组Add group。我创建了两个组件，QueryDesignerComponent并且QueryComponent. QueryDesignerComponent保存外部容器，带有AND和OR条件，并QueryComponent保存行输入，即LHS,operator和RHS。
Add rule再推送一个条目即可增长规则。我用 重复这一点。QueryComponentQueryDesignerComponent*ngForAdd 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>这样我就可以管理内部的并行查询和组 …