在所有视图中制作 Telerik Sidedrawer [英] Make Telerik Sidedrawer in all Views

问题描述

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

I've successfully got the Telerik Side-drawer working in one view, but I'm stuck with making it into a component I can use globally.

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

I'd like to avoid copy and pasting it into every view, so my question is how can I turn it into a reusable component.

推荐答案

所以当你使用 page-router-outlet

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

Do not modify the main app template <page-router-outlet></page-router-outlet> - you might feel otherwise but its fine (the way the page router outlet works would add the side drawer only to the main page - documentation might be misleading but it works like that).

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

Now create a component that will be you directive that contains the side drawer, thats the template:

<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 指令的基础):

The TS part will be based on the example SideDrawer component. Lets say that its declared like that (please note to change your paths in @Component to actual files as I ripped that from actual project - so that template is placed for me in components/header/header.component.html and will be base for your-header directive):

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

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

In your actual page (again showing it on my project login page) you pass this new directive 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 包装在指令中

And you wrap the login.component.html in the directive

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

它会做的是始终在 sidedrawer 内容部分(SideDrawer 模板中的 ng-content)生成页面内容，就像 angular 作品中的普通指令一样.

What it will do is spawn content of you page always in sidedrawer content section (ng-content in the SideDrawer template), like the normal directives in angular works.

唯一缺少的是在引导程序启动中添加 Sidedrawer 指令本身.

The only missing thing would be adding the Sidedrawer directive itself in your bootstrap initiation.

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)

If something does not work its that u made mistake in embedding the directive, you can throw out the SideDrawer and add just some label there, till you get it working (properly passing html through ng-content)

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

Note that it is form 1.3.x SideDrawer and I belive there was change in 1.4.x that would change your bootstrap file obviously but the handling stays the same.

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

Note that everything needs to be wrapped in the SideDrawer template otherwise you will have two view drawers and it will fall flat (SideDrawer has its own "drawing" method). And if you dont want the SideDrawer on some page you just do not include the directive.

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

Also as this is normal directive you can pass staff to you header <your-header variable="variableValue">. You can switch this way between top page align models and options for ActionBar.

这篇关于在所有视图中制作 Telerik Sidedrawer的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！