В NativeScript с Angular, как я могу получить идентификатор элемента интерфейса?

Я пытаюсь избежать неожиданного поведения в приложении 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>

Моя цель получить автофокус поля поиска, но я не могу получить элемент интерфейса.


nativescript typescript android javascript nativescript-angular
person Jean Carlos    schedule 17.06.2016    source источник
comment
Пожалуйста, игнорируйте приватный _router: Router внутри конструктора.   -  person Jean Carlos    schedule 17.06.2016

Ответы (2)


arrow_upward
10
arrow_downward

чтобы расширить ответ Николая выше, чтобы использовать @ViewChild, добавьте #foo в макет стека, чтобы он выглядел так:

<StackLayout #foo ....

тогда:

@ViewChild('foo') stackLayout: ElementRef;

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

он не получит элемент по идентификатору, но это способ взаимодействия с элементами в большей степени ng2, который делает ваш код более слабо связанным с DOM.

person JoshSommer    schedule 17.06.2016
comment
Я задал аналогичный вопрос [здесь] (stackoverflow.com/questions/41809113/) можете ли вы ответить на этот вопрос - person krv; 23.01.2017

arrow_upward
2
arrow_downward

Чтобы получить элемент в вашем проекте, вы должны использовать декоратор @ViewChild, который поможет вам создать новое свойство, указывающее на SearchBar. В связи с этим вы можете просмотреть мой проект здесь, а также просмотреть эту статью: Создание приложений с помощью NativeScript и Angular 2

person Nikolay Tsonev    schedule 17.06.2016