在所有视图中制作 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>

它的作用是始终在 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 选项之间切换。