0

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

<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>

这是我的指令。 指示

然后我在指令的 ngOnInit 方法中得到了意外的 ElementRef，whoesnativeElement属性未定义。如果您能帮助我，我将不胜感激。

4

1 回答 1

0

您可以在此处查看nativescript-telerik-ui 插件的 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();
    }
}

从这里复制。

于 2017-03-07T14:54:03.277 回答