Как показать sideDrawer над панелью действий в пользовательском интерфейсе Telerik для Nativescript с помощью Angular2?

Я пытался добавить боковой ящик из Пользовательский интерфейс Telerik для Nativescript с использованием Angular2.

У них есть директива под названием showOverNavigation, которая является логическое значение, которое должно работать, если установлено значение «Истина», но в настоящее время оно не работает в моем проекте.

Я прикреплю свой код app.component.html, чтобы, возможно, вы могли помочь мне обнаружить в нем любую ошибку.

<RadSideDrawer showOverNavigation="{{true}}>"
<StackLayout tkDrawerContent class="sideStackLayout">
    <StackLayout class="sideTitleStackLayout">
        <Label text="Navigation Menu"></Label>
    </StackLayout>
    <StackLayout class="sideStackLayout">
        <Label text="Primary" class="sideLabel sideLightGrayLabel"></Label>
        <Label text="Social" class="sideLabel"></Label>
        <Label text="Promotions" class="sideLabel"></Label>
        <Label text="Labels" class="sideLabel sideLightGrayLabel"></Label>
        <Label text="Important" class="sideLabel"></Label>
        <Label text="Starred" class="sideLabel"></Label>
        <Label text="Sent Mail" class="sideLabel"></Label>
        <Label text="Drafts" class="sideLabel"></Label>
    </StackLayout>
</StackLayout>
<StackLayout tkMainContent>
    <ActionBar class="actionBar" title="Home">
        <image src="~/res/icon.png" (tap)=openDrawer() stretch="none" ios.position="left" ></image>
    </ActionBar>
    <Label [text]="mainContentText" textWrap="true" class="drawerContentText"></Label>
    <Button text="OPEN DRAWER" (tap)=openDrawer()></Button>
</StackLayout>
</RadSideDrawer>

Пожалуйста, сообщите мне любую дополнительную информацию, которую я мог бы предоставить по этому вопросу. Заранее спасибо! знак равно


nativescript javascript angular angular2-nativescript nativescript-telerik-ui
person Gonzalo Diaz Ailan    schedule 06.10.2016    source источник

Ответы (3)


arrow_upward
1
arrow_downward

Вы создаете проект angular-2, но ваше логическое значение объявлено так, как будто оно взято из модели привязки в приложении NativeScript Core. Возможно, вы можете попытаться объявить свою истинную ценность напрямую без привязки.

<RadSideDrawer showOverNavigation="true">
person Nick Iliev    schedule 06.10.2016
comment
Спасибо за ваш ответ! К сожалению, я попробовал, как вы сказали, и получил пустую страницу (кнопка моего html не отображается); если я нажимаю в любом месте, я получаю необработанное исключение, но tns livesync --watch продолжает работать = O - person Gonzalo Diaz Ailan; 06.10.2016
comment
В соответствии с этой проблемой здесь github.com/telerik/nativescript-ui-samples -angular/issues/26 showOverNavigation в настоящее время недоступен в приложениях Angular + {N}. Это связано с этой веткой github.com/NativeScript/nativescript-angular/issues/394 так что вы можете следить за ним. - person Nick Iliev; 06.10.2016
comment
Большое спасибо! Так что я думаю, что на данный момент я перейду на {N} без Angular2 =O. - person Gonzalo Diaz Ailan; 06.10.2016
comment
интересно, я думаю, что кто-то заработал на ng2: D, но не знаю, кто сейчас: / может быть, попробуйте как [showOverNavigation] = true - person Marek Maszay; 07.10.2016

arrow_upward
1
arrow_downward

@Ник Илиев дал мне ответ:

«В соответствии с этой проблемой здесь github.com/telerik/nativescript-ui-samples -angular/issues/26 showOverNavigation в настоящее время недоступен в приложениях Angular + {N}. Это связано с этой веткой github.com/NativeScript/nativescript-angular/issues/394, так что вам, возможно, стоит за ним следить".

Я думаю, что этот вопрос решен на данный момент с этим вкладом.

Спасибо @Ник Илиев

person Gonzalo Diaz Ailan    schedule 06.10.2016

arrow_upward
0
arrow_downward

На сегодняшний день вы можете легко добиться такого поведения с помощью кода XML или Angular.

Из XML

В определении представления XML вы можете использовать свойство showOverNavigation следующим образом:

<RadSideDrawer [showOverNavigation]="true">
   ...
</RadSideDrawer>

Из углового кода

В дополнение к XML вы можете изменить поведение с помощью кода Angular. Если у вас есть объявление ViewChild для RadSideDrawerComponent в вашем компоненте, вы можете установить свойство следующим образом:

this.drawerComponent.sideDrawer.showOverNavigation = true;

При условии, что у вас есть объявление ViewChild, подобное этому:

@ViewChild(RadSideDrawerComponent) 
public drawerComponent: RadSideDrawerComponent;
person Mustafa Çağatay Tulun    schedule 17.12.2017