angularjs - 在所有 View 中制作 Telerik Sidedrawer

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

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

最佳答案

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

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

<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 作品中的普通指令一样。

唯一缺少的是在 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 并在那里添加一些标签，直到你让它工作(通过 ng-content 正确传递 html )

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

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

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

关于angularjs - 在所有 View 中制作 Telerik Sidedrawer，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/39752493/