页面代码中的 Ionic 2 引用 动态数组中的组件

Question

我有一张幻灯片，其中填充了包含相同自定义组件(使用 img 的画布(的实例数组*ngFor，我需要在使用此幻灯片的页面.ts访问当前选定的组件并调用其某些方法，例如：

let curr: MyComponent = this.slides[selected];

请注意，数组可能会更改，因此在构造函数/初始化上不能是静态的。

我知道如何在一个元素上使用#reference、ElementRef和@ViewChild，但我无法弄清楚访问数组中一个元素的语法。

编辑

我用 plunker做了一个例子，但我没有注册，也不知道链接会持续多久，所以下面是来自 angular2+打字稿 plunker 项目的修改源(对不起，我现在才意识到这是一个 angular2 唯一的问题，而不是离子的(

因此，我需要的是，从App.current()实现访问元素实例i为MyCoolComponent

let curr: MyCoolComponent = ?

src/app.ts：

//our root app component
import {Component, NgModule, VERSION} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'
import {MyCoolComponent} from './MyCoolComponent'
@Component({
selector: 'my-app',
template: `
<div>
<h2>Hello {{name}}</h2>
<div *ngFor="let item of texts; let i = index">
<my-cool text="{{item.text}}" (click)="current(i)"></my-cool>
</div>
</div>
`,
})
export class App {
name:string;
texts = [ 
{ text: "test1" },
{ text: "test2" },
{ text: "test3" }
]
constructor() {
this.name = `Angular! v${VERSION.full}`
}
current(i) {
console.log('current: ',i)
}
}
@NgModule({
imports: [ BrowserModule ],
declarations: [ App, MyCoolComponent ],
bootstrap: [ App ]
})
export class AppModule {}

src/MyCoolComponent.ts：

import {Component, Input} from '@angular/core'
@Component({
selector: 'my-cool',
template: `
cool {{text}}
`,
})
export class MyCoolComponent {
@Input('text') text:String;
constructor() {
this.text = `test`
}
}

Answer 1

组件通常不会注入到页面/其他组件中。这就是服务的用途。因此，您将无法"调用"组件的功能。

组件不是事件处理程序。如果你有一个需要处理的事件，它应该由组件本身封装，如果需要，发出到它的父组件/页面。

否则。。我会创建一个包含组件及其 ElementRef 的对象。只需在每次数组更改时更新这些值即可。