5

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>

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

4

2 に答える 2

10

上記の Nikolay の回答を拡張して@ViewChild#foo をスタック レイアウトに追加すると、次のようになります。

<StackLayout #foo ....

それから：

@ViewChild('foo') stackLayout: ElementRef;

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

ID で要素を取得することはありませんが、これは要素と対話するための ng2 の方法であり、コードを DOM とより疎結合に保ちます。

于 2016-06-17T14:51:21.533 に答える
2

プロジェクトで要素を取得するには、 @ViewChilddecorator を使用する必要があります。これは、 を指す新しいプロパティを作成するのに役立ちますSearchBar。それに関しては、私のプロジェクトをここで確認し、この記事を確認することもできます: NativeScript と Angular 2 を使用したアプリの構築

于 2016-06-17T14:41:06.340 に答える