Question

我有带有子组件的模块。
模块1

模块>子1 +子2

Child 2具有4个子组件。

孩子2>子孩子1 +子孩子2 +子孩子3 +子孩子4

SubChild1具有一个表单和一个圆形进度条html，如下所示，此部分仅在showOnlyPercentage为true时显示。圈出是返回选项设置的功能。

<div class="circle-container" *ngIf="showOnlyPercentage">
<ks-circle-progress [options]="makeCircleShape()"></ks-circle-progress>
<p class="someClass">{{someVariable}}%</p>

SubChild1的Typescript文件

import { Component, OnInit, ViewChild, AfterViewInit } from '@angular/core';
import { ShapeOptions, LineProgressComponent, CircleProgressComponent, SemiCircleProgressComponent } from 'angular2-progressbar';
import { CircleService } from '../../../../services/shapes/circle.service';
@Component({
 selector: 'app-section-b',
 templateUrl: './subChild1.component.html',
 styleUrls: ['./subChild1.component.scss']
})
export class SubChild1 implements OnInit {

  showOnlyPercentage = false;
  performancePercentage = 30;
  @ViewChild(CircleProgressComponent) circleComp: CircleProgressComponent;
  constructor(private _circleServie: CircleService) { }

  ngOnInit() {
  }

  makeCircleShape() {
    const circleOptions = this._circleServie.circleShape();
    return circleOptions;
  }

}

CircleService仅用于获取圈子选项设置。

现在，使用以下代码将该组件导入“子代1”组件

@ViewChild(SubChild1) subChild1: SubChild1;

subChild1的showOnlyPercentage属性设置为true，因此我们可以看到progressBar

ngOnInit() {
  this.subChild1.showOnlyPercentage = true;
}
 ngAfterViewInit() {
    this.subChild1.performancePercentage = 90;
this.subChild1.circleComp.animate(.9);
 }

模块的导入如下

@NgModule({
imports: [
SharedModule,
ProgressBarModule
],
declarations: [Child2,SubChild1,SubChild2,SubChild3,SubChild4,Child1],
})

在Sub1中使用SubChild1的方式相同，我在Child1组件中使用其他SubChild2，SubChild3，SubChild4。导入和使用的代码与上面显示的SubChild1相同。当我在ngAfterViewInit（）中为所有SubChildren使用animate函数时，它们中的3个都可以正常工作。但是一个子孩子正在给问题。在控制台中，我们有一个错误：

Child1.html：22错误TypeError：无法读取未定义的属性“动画”

这仅发生于子孩子中的1个，其他3个孩子工作正常。
注意：使用动画方法时，如果无法工作的SubChild位于其他SubChildren的顶部，则所有组件都将停止工作。这意味着有问题的子孩子下面的子孩子不能工作。当放在有问题的子孩子面前时，其他所有三个子孩子都可以正常工作

Angular 6进度栏圈子不起作用

0 个答案: