在所有视图中制作 Telerik Sidedrawer

Posted 2023-04-13

【中文标题】在所有视图中制作 Telerik Sidedrawer

【英文标题】：Make Telerik Sidedrawer in all Views

【发布时间】：2017-02-06 17:28:42

【问题描述】：

我已经成功地让 Telerik Side-drawer 在一个视图中工作，但我坚持将其变成一个可以在全球范围内使用的组件。

我想避免将其复制并粘贴到每个视图中，所以我的问题是如何将其变成可重用的组件。

【问题讨论】：

您好，您能否分享您目前获得的代码，因为这可能有助于人们回答您的问题，并充实您的问题以帮助防止投票失败。

【参考方案1】：

所以当你使用page-router-outlet

不要修改主应用程序模板<page-router-outlet></page-router-outlet> - 你可能会觉得不一样，但它很好（页面路由器出口的工作方式只会将侧抽屉添加到主页 - 文档可能会产生误导，但它是这样工作的） .

现在创建一个包含侧边抽屉的指令组件，即模板：

<RadSideDrawer #drawer>
    <StackLayout tkDrawerContent class="sideStackLayout">
        <StackLayout class="sideTitleStackLayout">

            <ScrollView>
                <StackLayout class="sideStackLayout">

                <!-- content of menu -->

                </StackLayout>
            </ScrollView>
        </StackLayout>

    </StackLayout>
    <StackLayout tkMainContent>
        <ActionBar title="">
              <!-- this is your action bar content -->
        </ActionBar>
        <ng-content></ng-content>
    </StackLayout>
</RadSideDrawer>

TS 部分将基于示例 SideDrawer 组件。可以说它是这样声明的（请注意，将@Component 中的路径更改为实际文件，因为我从实际项目中撕下它 - 以便我将模板放置在components/header/header.component.html 中，并将作为your-header 指令的基础） ：

@Component(
    selector: "your-header",
    templateUrl: "components/header/header.component.html",
    styleUrls: ['components/header/header.css'],
)

在你的实际页面中（再次显示在我的项目login 页面上）你传递了这个新指令HeaderComponent

import HeaderComponent from "../../header/header.component";

@Component(
    selector: "login-page",
    templateUrl: "components/user/login/login.component.html",
    styleUrls: ['components/user/login/login.css'],
    directives: [HeaderComponent]
)

然后你将login.component.html 包装在指令中

<your-header>
    <StackLayout class="content">
        <label class="h1 left" text="Please Login"></label>
    </StackLayout>
</your-header>

它的作用是始终在 sidedrawer 内容部分（SideDrawer 模板中的ng-content）生成页面内容，就像 Angular 作品中的正常指令一样。

唯一缺少的就是在引导启动中添加 Sidedrawer 指令本身。

import nativeScriptBootstrap from "nativescript-angular/application";
import nsProvideRouter from "nativescript-angular/router";
import RouterConfig from "@angular/router";
import AppComponent from "./app.component";
import SIDEDRAWER_PROVIDERS from "nativescript-telerik-ui/sidedrawer/angular";

import LandingComponent from "./components/landingPage/landing.component";
import LoginComponent from "./components/user/login/login.component";



import ExperimentalComponent from "./components/experimental/experimental.component";


export const AppRoutes: RouterConfig = [
     path: "", component: LandingComponent ,
     path: "login", component: LoginComponent ,

]

nativeScriptBootstrap(AppComponent, [
    [nsProvideRouter(AppRoutes, )],
    SIDEDRAWER_PROVIDERS,
],  startPageActionBarHidden: true );

如果您在嵌入指令时犯了错误而无法正常工作，您可以扔掉 SideDrawer 并在其中添加一些标签，直到您让它正常工作（通过 ng-content 正确传递 html）

请注意，它是1.3.x SideDrawer 的形式，我相信1.4.x 的变化会明显改变您的引导文件，但处理方式保持不变。

请注意，所有内容都需要包装在 SideDrawer 模板中，否则您将有两个视图抽屉，并且它会变平（SideDrawer 有自己的“绘图”方法）。如果您不想在某些页面上使用 SideDrawer，您只需不包含该指令。

由于这是正常指令，您可以将人员传递给您的标题<your-header variable="variableValue">。您可以通过这种方式在首页align 模型和ActionBar 选项之间切换。

【讨论】：

如果我使用的是 page-router-outlet 而不是 ng-content，它不起作用。操作栏变空。但是如何实现路由呢？

路由并没有真正改变。您不应该更改 page-router-outlet 模板，因为它不像正常指令那样工作，据我所知，新页面正在替换根目录。这就是为什么将操作栏放在page-router-outlet 中的人会在第一页看到操作栏，但在其他页面上看不到。 sidedrawer 的实现是围绕page-router-outlet 构建方式的一个大技巧；]

SIDEDRAWER_PROVIDERS 似乎在最新版本的 RadSideDrawer 中已过时。有什么简单的替代方案吗？

SIDEDRAWER_DIRECTIVES ?