如何使用Angular2在Telerik的Nativescript UI中的Action Bar上显示sideDrawer？

Posted 2023-04-13

【中文标题】如何使用Angular2在Telerik的Nativescript UI中的Action Bar上显示sideDrawer？

【英文标题】：How to show sideDrawer over Action Bar in Telerik's UI for Nativescript using Angular2?

【发布时间】：2017-02-15 12:52:39

【问题描述】：

我试图使用 Angular2 从Telerik's UI for Nativescript 添加一个Side Drawer。

他们有一个名为 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>

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

【参考方案1】：

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

<RadSideDrawer showOverNavigation="true">

【讨论】：

感谢您的回复！可悲的是，我按照您所说的进行了尝试，但得到了一个空白页面（未显示我的 html 按钮）；如果我在任何地方点击我遇到未处理的异常但 tns livesync --watch 继续运行 =O

根据此处github.com/telerik/nativescript-ui-samples-angular/issues/26 的此问题，showOverNavigation 目前在 Angular + N 应用程序中不可用。它与此线程github.com/NativeScript/nativescript-angular/issues/394 相关，因此您可能需要关注它。

非常感谢！所以我想我会暂时不使用 Angular2 转移到 N =O。

我想知道有人在 ng2 上得到了它 :D 但现在不知道是谁 :/ 也许试试 [showOverNavigation]="true"

【参考方案2】：

@Nick Iliev 给了我答案：

“根据这里的这个问题github.com/telerik/nativescript-ui-samples-angular/issues/26，showOverNavigation 目前在 Angular + N 应用程序中不可用。它与此线程 github.com/NativeScript/nativescript-angular/issues/394 相关，因此您可能需要关注它。”

我想这个问题现在通过这个贡献解决了。

谢谢@Nick Iliev

【参考方案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;