如何使用 Angular2 在 Telerik 的 UI 中为 Nativescript 在操作栏上显示 sideDrawer？

Question

我正在尝试使用 Angular2 添加 Side Drawer from Telerik's UI for Nativescript。

他们有一个名为 showOverNavigation 的指令，它是一个布尔值，当设置为 "True" 值时应该可以完成工作，但它目前不适用于我的项目。

我会附上我的 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>

请告诉我我可以就此问题提供的任何其他信息。提前致谢！ =)

Answer 1

您正在创建 angular-2 项目，但您的布尔值声明为来自 NativeScript Core 应用程序中的绑定模型。或许你可以尝试不绑定直接声明你的真实价值

<RadSideDrawer showOverNavigation="true">

Answer 2

@Nick Iliev 给了我答案：

"According to this issue here github.com/telerik/nativescript-ui-samples-angular/issues/26 the showOverNavigation is currently not available in Angular + {N} apps. Its related to this thread github.com/NativeScript/nativescript-angular/issues/394 so you might want to keep an eye on it."

我想这个问题目前已经通过这个贡献得到了解决。

谢谢@Nick Iliev

Answer 3

从今天开始，您可以通过 XML 或 Angular 代码轻松实现此行为。

来自XML

在XML视图定义中，你可以像这样使用showOverNavigation属性：

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

来自Angular代码

除了 XML 之外，您还可以通过 Angular 代码更改行为。如果您的组件中有 RadSideDrawerComponent 的 ViewChild 声明，您可以像这样设置属性：

this.drawerComponent.sideDrawer.showOverNavigation = true;

假设您有这样的 ViewChild 声明：

@ViewChild(RadSideDrawerComponent) 
public drawerComponent: RadSideDrawerComponent;

如何使用 Angular2 在 Telerik 的 UI 中为 Nativescript 在操作栏上显示 sideDrawer？

How to show sideDrawer over Action Bar in Telerik's UI for Nativescript using Angular2?

javascript

nativescript

angular2-nativescript

nativescript-telerik-ui

angular

来自XML

来自Angular代码