我在Ionic 2应用程序中使用Angular 2。我想从模板中获取一个值,以便在我的组件中使用。我知道如何在我的组件中定义变量,然后在我的模板中使用它,但我正在寻找相反的方法。这就是我的意思:
组件:
@Component({
template: '<ion-list [route]="path/on/site">
<ion-item *ngFor="let item of items">
{{title}}
</ion-item>
</ion-list>'
})
export class List {
route: string;
constructor() {
this.route = // should get value of [route] in template;
this.loadData( this.route );
}
loadData()...
}
我想在模板中硬编码[route]的值,然后在我的组件中获取该值作为this.route。 [route]不必在离子列表中,只要我可以将它放入我的组件中,它就可以在任何地方。
提前致谢。
答案 0 :(得分:1)
您想使用ViewChild
。
请参阅此演示plunker:https://plnkr.co/edit/AkcKeInPxLRgNBPKiglk?p=preview
import {Component, NgModule, ViewChild, ElementRef} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'
@Component({
//selector: 'my-app', // do NOT use in Ionic
template: `
<div>
<h2 #headerWithRoute route="/any/route/here">Hello {{name}}</h2>
</div>
`,
})
export class App {
@ViewChild('headerWithRoute') h2: ElementRef;
constructor() {
this.name = 'Angular2'
}
private _getAttributeValue(element: ElementRef, name: string, defaultVal: any): any {
let attribute = element.nativeElement.attributes.getNamedItem(name);
if (!attribute) return defaultVal;
return attribute.nodeValue;
}
ngAfterViewInit() {
// viewchilds are only valid after this event !!
console.log(this._getAttributeValue(this.h2, 'route'));
}
}
// do NOT use in Ionic
//@NgModule({
// imports: [ BrowserModule ],
// declarations: [ App ],
// bootstrap: [ App ]
//})
//export class AppModule {}