在所有视图中制作 Telerik Sidedrawer

Question

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

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

Answer 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>

它将始终在侧边栏内容部分（侧边栏模板中的ng-content）生成页面内容，就像angular中的正常指令一样。

唯一缺少的是在您的 bootstrap 初始化中添加 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 并在那里添加一些标签，直到你让它工作（正确地通过 html 到 ng-content)

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

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

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

在所有视图中制作 Telerik Sidedrawer

Make Telerik Sidedrawer in all Views

telerik

angularjs

angular2-nativescript

nativescript-telerik-ui

angular