In NativeScript mit Angular, wie bekomme ich ein Interface-Element die ID?

Question

Ich versuche, unerwartetes Verhalten in einer NativeScript-Anwendung zu vermeiden.

Wenn ich auf jeden Bildschirm gehe, der ein Suchfeld (SearchBar) System hat, setzt der Fokus automatisch auf das Suchfeld.

Dann bekam ich Hilfe mit einem Freund, der mir eine Funktion gab, um dieses Problem zu lösen. Aber das Problem, mit dem ich gerade konfrontiert bin, ist, dass ich das Interface-Element nicht bekommen kann. Ich habe den folgenden Code:

import {Component} from "@angular/core"; 
import {Page} from "ui/page"; 
import frame = require("ui/frame"); 

@Component({ 
    selector: "clientes", 
    templateUrl: "pages/clientes/clientes.html", 
    styleUrls: ["pages/clientes/clientes.common.css", 
    "pages/clientes/clientes.css"] 
}) 

export class ClientesPage { 

    page; 

    constructor(private _router: Router) { 
     this.page = <Page>frame.topmost().currentPage; 
     this.removeSearchFocus(); 
    } 

    removeSearchFocus() { 
     var parent = this.page.getViewById('box-lista'); 
     var searchBar = this.page.getViewById('barra-busca'); 

     console.log(JSON.stringify(parent)); // UNDEFINED 
     console.log(JSON.stringify(searchBar)); // UNDEFINED 

     if (parent.android) { 
      parent.android.setFocusableInTouchMode(true); 
      parent.android.setFocusable(true); 
      searchBar.android.clearFocus(); 
     } 

    } 
} 

Und dann habe ich die Vorlage:

<Page.actionBar> 
    <ActionBar title="Clientes"></ActionBar> 
</Page.actionBar> 

<StackLayout orientation="vertical" id="box-lista"> 
    <SearchBar hint="Buscar" cssClass="mh mv" id="barra-busca"></SearchBar> 
</StackLayout> 

Mein Ziel ist es, den Autofokus des Suchfeldes zu bekommen, aber ich kann nicht das Interface-Element erhalten.

Answer 1

Um Element in Ihrem Projekt zu erhalten, sollten Sie @ViewChild Dekorator verwenden, der Ihnen helfen wird, neue Eigenschaft zu erstellen, die auf die SearchBar zeigt. Building Apps with NativeScript and Angular 2

Answer 2

erweitern auf Nikolay Antwort darüber @ViewChild verwenden #foo zu Ihrem Stack-Layout hinzufügen, damit es so aussieht: In Bezug auf das, man konnte mein Projekt here und auch eine Bewertung zu diesen Artikeln bewertet

<StackLayout #foo ....

dann:

@ViewChild('foo') stackLayout: ElementRef; 

ngAfterViewInit() { 
    let yourStackLayoutInstance = this.stackLayout.nativeElement; 
} 

es wird das Element von ID nicht erhalten, aber dies ist die mehr NG2 Art und Weise mit Elementen der Interaktion und hält Ihren Code lose coupl Ed auf das DOM.