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

问题描述

我已经成功地在一个视图中使用了Telerik侧抽屉，但是我坚持将其制成可以在全球范围内使用的组件.

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></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包装在指令中

<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并在其中添加一些标签，直到它起作用为止(正确地将html通过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屋！