如何使用nativescript angular2在RadSideDrawer中获取本机控件?

时间:2017-03-06 03:40:32

标签: angular2-nativescript nativescript-telerik-ui

我有一个RadSideDrawer,我想将一个指令应用于RadSideDrawer的MainContent中的Control。 这是使用RadSideDrawer的我的组件。

discovery.post

这是我的指示。 Directive

然后我在Directive的ngOnInit方法中得到了意外的ElementRef,谁<RadSideDrawer> <StackLayout tkDrawerContent class="sideStackLayout"> <StackLayout class="sideTitleStackLayout" backgroundGradient [gradientColors]="['red','blue']"> <Image horizontalAlignment="center" class="avatar" src="res://avatar"></Image> <Label horizontalAlignment="center" class="name" text="Zeeko"></Label> <Label horizontalAlignment="center" class="email" text="1519560753@qq.com"></Label> </StackLayout> <StackLayout> <StackLayout orientation="horizontal"> <Label [text]="'fa-file-text' | fonticon" class="fa icon"></Label> <Label class="side-item-lbl" text="我的简历"></Label> </StackLayout> <Label class="side-item-lbl" col="2" row="2" text="已投递"></Label> </StackLayout> </StackLayout> <StackLayout tkMainContent> <Button text="OPEN DRAWER" (tap)=openDrawer()></Button> <Label text="欢迎来到主页" textWrap="true"></Label> </StackLayout> 属性未定义。 如果你能帮助我,我将非常感激。

1 个答案:

答案 0 :(得分:0)

您可以查看nativescript-telerik-ui插件here的RadSideDrawer sdk角度示例。

更具体地说,您可以在组件代码中获得RadSideDrawerComponent,如下所示:

import { Component, ViewChild, AfterViewInit } from "@angular/core";
import { RadSideDrawerComponent, SideDrawerType } from "nativescript-telerik-ui-pro/sidedrawer/angular";

@Component({
    moduleId: module.id,
    selector: "tk-sidedrawer-getting-started",
    templateUrl: 'getting-started.component.html',
    styleUrls: ['getting-started.component.css']
})
export class SideDrawerGettingStartedComponent implements OnInit {
    constructor() {
    }

    @ViewChild(RadSideDrawerComponent) public drawerComponent: RadSideDrawerComponent;
    private drawer: SideDrawerType;

    ngAfterViewInit() {
        this.drawer = this.drawerComponent.sideDrawer;
    }

    public openDrawer() {
        this.drawer.showDrawer();
    }
}

here复制。