Angular @ViewChildren获取未定义的值

我有一个web组件库（自定义元素），我希望在其他应用程序中使用。问题是

@ViewChildren（）

获取未定义的值，无法访问我的组件中的子级

我之所以使用

@ViewChildren

，是因为我使用的是

封装：viewcellulation.ShadowDom

。我尝试过使用

@ContentChildren

，但只要我在另一个应用程序中使用我的组件，

@ContentChildren

就不再有效（由于阴影DOM）

下面是一个简单的代码片段，仅用于说明当前的问题。可以访问完整代码

父组件：

定制-accordion.component.ts

子组件

自定义-accordion-content.component.ts

导出类CustomAccordionContentComponent实现OnInit{
私有内容ID：编号；
私有_头：字符串；
private _opened:boolean=false；
private\u clickFocus:boolean=true；
private _hideHR:boolean=false；
@输入（）等参：布尔值；
@Input（）设置contentId（值：number）{this.\u contentId=value；}
get contentId（）：number{返回此。\u contentId；}
@输入（'header'）设置头（值：字符串）{this.\u header=value；}
get header（）：字符串{返回此。_header；}
@Output（）toggleacordion:EventEmitter=neweventemitter（）；
切换打开（$event:any）{
this.opened=！this.opened；
$event.preventDefault（）；
this.toggleAccordion.emit（this.opened）；
}
keyUp（$event:KeyboardEvent）{
$event.preventDefault（）；
如果（$event.keyCode==32 | |$event.keyCode==19）{
this.toggleAccordion.emit（this.opened）；
}
}
//私有变量的其他setter和getter
构造函数（public elementRef:elementRef）{}
ngOnInit（）{}
}

自定义-accordion-content.component.html

{{header}}

然后我有了包含数据的容器

container.component.html

我一直试图解决这个问题，但没有结果。我只想获得@ContentChildren通过@ViewChildren获得的值。任何帮助都将不胜感激

export class CustomAccordionComponent implements AfterViewInit {

  @ContentChildren(CustomAccordionContentComponent) contentChildren: QueryList<CustomAccordionContentComponent>;
  @ViewChildren(CustomAccordionContentComponent) viewChildren: QueryList<CustomAccordionContentComponent>;

  setOpen() { this.open = true; }

  toggle() {
    console.log("toggle from accordion called...");
    this.setOpen();
  }

  constructor(public elementRef: ElementRef, private renderer2: Renderer2) { }

  ngAfterViewInit(): void {
    console.log("Content children:", this.contentChildren);
    console.log("View children:", this.viewChildren);
    }
}

<div>
   <app-custom-accordion-content></app-custom-accordion-content>
</div>

<div>
    <ng-content></ng-content>
</div>

export class CustomAccordionContentComponent implements OnInit {
  private _contentId: number;
  private _header: string;
  private _opened: boolean = false;
  private _clickFocus: boolean = true;
  private _hideHR: boolean = false;

  @Input() isopen: boolean;

  @Input() set contentId(value: number) { this._contentId = value; }
  get contentId(): number { return this._contentId; }

  @Input('header') set header(value: string) { this._header = value; }
  get header(): string { return this._header; }

  @Output() toggleAccordion: EventEmitter<boolean> = new EventEmitter();

  toggleOpen($event: any) {
    this.opened = !this.opened;
    $event.preventDefault();
    this.toggleAccordion.emit(this.opened);
  }

  keyUp($event: KeyboardEvent) {
    $event.preventDefault();
    if ($event.keyCode === 32 || $event.keyCode === 19) {
      this.toggleAccordion.emit(this.opened);
    }
  }

  // other SETTERS AND GETTERS of private variables

  constructor(public elementRef: ElementRef) { }

  ngOnInit() { }
}

<div #accordion class="accordion" [class.selected]="opened" [class.click-focus]="clickFocus" tabindex="{{contentId}}"
  (keyup)="keyUp($event)" (click)="toggleOpen($event)">
  <div class="accordion-panel add-padding row">
    <div class="header col-10">
      {{header}}
    </div>
    <div class="chevron col-2">
      <svg class="chevron" width="17px" height="9.5px" viewBox="0 0 17 10" version="1.1"
        xmlns="http://www.w3.org/2000/svg">
        <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
          <polyline id="Path" stroke="#231F20" stroke-width="2" points="1 1 8.47875354 8.5 15.9575071 1">
          </polyline>
        </g>
      </svg>
    </div>
  </div>
  <div *ngIf="opened" class="accordion-content">
    <ng-content></ng-content>
  </div>
  <hr *ngIf="!hideHR" [class.extend]="opened">
</div>

<div class="form-group w-100">
    <app-custom-accordion>
        <app-custom-accordion-content *ngFor="let content of fullContent; let i = index" [header]="content.header"
            [isopen]="content.open" contentId="{{i}}">
            <div>
                <app-custom-p row="1" col="12" *ngFor="let detail of content.content[0].details" [text]="detail">
                </app-custom-p>
                <app-custom-p row="2" col="12" [text]="content.content[0].footer"></app-custom-p>
            </div>
        </app-custom-accordion-content>
    </app-custom-accordion>
</div>