有什么方法可以在一个组件中创建 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>
我正在使用 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>