角2テンプレートから変数を取得する

Question

私は、イオン2アプリケーションで角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()... 

} 

私は、テンプレート内の[ルート]の値をハードコーディングし、その後this.routeとしての私のコンポーネントでその値を取得したいです。 [経路]はイオンリスト上にある必要はありませんが、それを私のコンポーネントに入れることができればどこでも構いません。

ありがとうございます。

Answer 1

ViewChildを使用します。 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 {}