NativeScriptでAngularを使用している場合、どのようにインターフェース要素にidを渡すことができますか？

Question

NativeScriptアプリケーションで予期しない動作が起こらないようにしようとしています。

検索フィールド（SearchBar）がある画面に移動すると、検索フィールドに自動的にフォーカスが移ります。

私はこの問題を解決する機能を私に与えた友人に助けを求めました。しかし、私が直面している問題は、インタフェース要素を手に入れることができないということです。私は、次のコードを持っている：

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(); 
     } 

    } 
} 

をそして私はテンプレートがあります。

<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> 

私の目標は、検索フィールドのオートフォーカスを取得することですが、私はインターフェイス要素を取得することはできません。

Answer 1

プロジェクトの要素を取得するには、@ViewChildデコレータを使用する必要があります。SearchBarを指す新しいプロパティを作成するのに役立ちます。それに関しては、あなたは私のプロジェクトhereを見直す可能性があり、また、この記事をレビューする：Building Apps with NativeScript and Angular 2

Answer 2

、それがどのように見えるので、@ViewChildがあなたのスタックレイアウトに#fooを追加使用するには、この上のニコライの答えに展開する：

<StackLayout #foo ....

その後、

：

@ViewChild('foo') stackLayout: ElementRef; 

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

それはIDによって要素を取得することはありませんが、これは要素との相互作用のよりNG2方法であり、couplより緩くあなたのコードを保持しますDOMに登録されます。