Angular 2 Get Komponente Variable von Vorlage

Question

Ich benutze Angular 2 in einer Ionic 2-Anwendung. Ich möchte einen Wert aus einer Vorlage abrufen, die in meiner Komponente verwendet werden soll. Ich weiß, wie man eine Variable in meiner Komponente definiert und sie dann in meiner Vorlage verwendet, aber ich suche genau umgekehrt. Hier ist, was ich meine:

Komponente:

@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()... 

} 

Ich mag den Wert von [route] in der Vorlage codieren, und dann diesen Wert in meiner Komponente als this.route zu bekommen. [Route] muss nicht auf der Ion-Liste stehen, es kann überall sein, solange ich es in meine Komponente hineinbekomme.

Vielen Dank im Voraus.

Answer 1

Sie möchten eine ViewChild verwenden.

Sehen Sie diese Demo 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 {}