如何获取Angular组件中的元素并隐藏/显示它们？

Question

我正在尝试在Angular中构建一个向导组件。为了制作进度条和隐藏/显示步骤，我希望能够通过计算＆＃34;步骤＆＃34;的数量来计算向导中的步数。里面的模板。我刚刚了解了ContentChildren的概念，它给了我elementRef个对象，但我不知道如何从那里开始：

wizard.component.ts

import { ... } from '@angular/core

export class WizardComponent implements AfterViewInit, OnInit {

    @ContentChildren('step') steps: QueryList<any>;

}

ngAfterViewInit() {

    this.steps.forEach(step => console.log(step));

}

wizard.component.html

<ng-content></ng-content>

app.component.html

<app-wizard>
    <div #step> First Step Screen </div>
    <div #step> Second Step Screen </div>
</app-wizard>