通用侧边菜单组件

Question

我为 RadSideDrawer（侧面菜单）使用了 nativescript-ui-samples-angular 存储库中的代码。它工作得很好，但是当我尝试将它全部包装在一个单独的组件中，然后我通过选择器将其添加到其他组件时，它变得平淡无奇。

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

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

它说

Cannot read property 'sideDrawer' of undefined

我错过了什么吗？问题不在于侧面菜单本身，而是将其包装到可重用组件中。

Answer 1

除了通过 RadSideDrawerComponent 获取引用的方法之外，您还可以使用 Angular id 并将其传递给您的 @ViewChild 指令，如下所示

file.component.html（为您的抽屉创建唯一 ID）

<RadSideDrawer #myDrawer>

file.component.ts

@ViewChild("myDrawer") public drawerComponent: RadSideDrawerComponent;

可以找到测试项目here（在app/home/home.component.ts中查找）

通用侧边菜单组件

generic side-menu component

nativescript

nativescript-telerik-ui

angular