访问组件的特定实例（已编辑）

Question

我正在尝试访问某个组件的特定实例，该应用在其他组件中多次使用它。当我使用查询命令 "fixture.debugElement.query(By.directive(ComponentName)).componentInstance;" 时，它只会在第一个创建的 ComponentName 实例上获取。

我已将示例分解为以下基本版本：

random.test.component.html

<random-test-child>
</random-test-child>

<snack-time
    [bestSnack]="cheeseAndCrackers">
</snack-time>

random.test.component.child.html

<snack-time
    [bestSnack]="applesAndOranges">
</snack-time>

<snack-time
    [bestSnack]="cookies">
</snack-time>

*所有变量名在它们各自的 .ts 文件中都是字符串（例如，applesAndOranges 是 "Apples and Oranges"）

查询命令选择的组件具有 "Apples and Oranges" 作为 bestSnack 的值。如果我想专门访问 "Cookies" 或 "Cheese and Crackers"，有没有办法做到这一点（除了添加 id 标签）？

编辑

好的，不同的计划：我在规范文件中使用 fixture.debugElement.query(By.directive(SnackTime)).componentInstance 来挑选 SnackTime 元素。我在原来的 random.test.component.html 中添加了另一个 SnackTime，现在它的内容如下：

<snack-time
    [bestSnack]="cheeseAndCrackers">
</snack-time>

<snack-time
    [bestSnack]="chipsAndSoda">
</snack-time>

我的想法是创建一个 QueryList 或 SnackTime 元素的数组，然后从那里挑选出特定的实例。但是，如果我这样做如下：

让componentsInThePage:SnackTime[] = fixture.debugElement.query(By.directive(SnackTime)).componentInstance;

我得到一个数组，其中只有第一个创建的 SnackTime 组件，而不是 random.test.component.html 文件中的两个组件（child.html 文件中的两个组件也没有出现）。如何创建 SnackTime 组件的 list/array？

Answer 1

您可以使用模板引用变量

如果您想在 model.ts 文件中操作该组件实例，您可以使用 @ViewChild 装饰器，例如 @ViewChild('cookies') cookies: SnackTimeComponent 来获取对它的引用。

或者您可以在模板的其他地方使用它。 <div>I have {{cookies.numCookies}} cookies!</div>

（假设属性 numCookies 存在于 SnackTimeComponent class 上）

Answer 2

这是对我编辑的回复。

关键是用"queryAll"代替"query"，然后把所有的DebugElements都变成SnackTime的实例。这将生成所有 SnackTime 元素的数组，包括其他 html 文件中的元素。

    let debugComponentsInThePage:DebugElement[] = fixture.debugElement.queryAll(By.directive(SnackTime));
    let componentsInThePage:SnackTime[] = [];

    for(var i=0; i<debugComponentsInThePage.length; i++){
        componentsInThePage[i] = debugComponentsInThePage[i].componentInstance;
        console.log(componentsInThePage[i]);
    }

访问组件的特定实例（已编辑）

Accessing a specific instance of a component (edited)

unit-testing

typescript

karma-runner

angular