如何让父类访问 Angular 2 中的子类？答案

【问题标题】：How can I get parent class to access child class in angular 2?如何让父类访问 Angular 2 中的子类？
【发布时间】：2018-04-27 22:14:31
【问题描述】：

我有一个带有 Typescript 的 Angular 2 应用程序。我想知道如何从父类访问子类。

父类是这样的：

@Component({
    selector: 'all-data-page',
    templateUrl: './all-data-page.component.html',
    styles: [require('./all-data-page.style.scss')]
})
export class AllDataPageComponent implements OnInit {
...
}

它的选择器如下所示：

<all-data-page [allData]="results.top3.Rows" type="Safeguards" *ngIf="!!results.AllDataSafeguards">
</all-data-page>

孩子长这样：

@Component({
  selector: 'all-data-row',
  templateUrl: './all-data-row.component.html',
  styles: [ require('./all-data-row.style.scss') ],
  encapsulation: ViewEncapsulation.None
})
export class AllDataRowComponent implements OnInit {
...
}

它的选择器看起来像这样：

 <div class="data-list">
        <all-data-row *ngFor="let item of categoryRows; let last=last"
                      relativeWidth="100"
                      [item]="item.chartData"
                      [last]="last"
                      [ChartLabel]="item.chartData.ChartLabel"
                      [acmCat1]="item.chartData.acmCat1"
                      [acmCat2]="item.chartData.acmCat2"
                      [acmCat3]="item.chartData.acmCat3"
                      [acmCat4]="item.chartData.acmCat4"
                      [acmCat5]="item.chartData.acmCat5"
                      (click)="selectCategory(item.fullObject)"
                      [selected]="selected">
        </all-data-row>
    </div>

我想知道如何从父类中引用子类。

谷歌上出现的各种网站建议使用@ViewChildren，但这对我不起作用。 Chrome 控制台只是告诉我“未定义 ViewChildren”。

我必须做什么才能让父类访问子类？

谢谢。

【问题讨论】：

您的代码未显示您如何使用@ViewChildren() 更多信息请参阅stackoverflow.com/questions/32693061/…
您是在尝试访问子类本身还是子类的 HTML 内容？
子类本身。它包含一个并不总是出现在 html 中的变量。它用于动态注入工具提示。我想根据用户操作更新工具提示的文本，但是当用户执行操作时，工具提示不会出现在页面上。

标签： angular

【解决方案1】：

我没有使用@ViewChildren。当我使用@ViewChildren（并得到错误）时，我这样做了：

@Component({
    selector: 'all-data-page',
    templateUrl: './all-data-page.component.html',
    styles: [require('./all-data-page.style.scss')]
})
export class AllDataPageComponent implements OnInit {
@ViewChildren(AllDataRowComponent) AllDataRowComponent : safeguardRow;
...
}

您提供的链接出现同样的错误。

【讨论】：