有什么方法可以在一个组件中创建 SideDrawer 并在 nativescript 中以多个步骤(组件)使用它?

Is there any way to create a SideDrawer in one Component and use it in multiple paces(Components) in nativescript?

我正在使用 NativeScript 开发应用程序。我想使用 RadSideDrawer。我从 nativescript.org 中了解到的是,我必须在每个要显示抽屉的组件中编写相同的代码片段。这是一个好习惯吗?或者还有其他方法吗?

1- 您可以使用带有内容投影的组件来显示动态内容。 2- 您可以将路由与 page-router-outlet

一起使用

第一个解:

mySideDrawer.component.html

<StackLayout tkMainContent>
    <ng-content></ng-content>
</StackLayout>

Home.component.ts

<GridLayout rows="*" height="1500px">
    <MySideDrawer #mySideDrawer>
        <Label fontSize="20" text="Component 1"></Label>
            <Button text="OPEN" (tap)="onOpen()"></Button>
            <Button text="Go to component 2" [nsRouterLink]="['/home/comp2']"></Button>
    </MySideDrawer>
</GridLayout>

完整演示: https://play.nativescript.org/?template=play-ng&id=YmqaP3

第二种解法:

<RadSideDrawer>
    <StackLayout tkDrawerContent backgroundColor="gray">
       <!-- Side bar content -->
    </StackLayout>

    <StackLayout tkMainContent>
        <page-router-outlet></page-router-outlet>
    </StackLayout>

</RadSideDrawer>