angularjs - 在所有视图中制作 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 内容部分（ng-content在 SideDrawer 模板中）生成页面的内容，就像 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 并在那里添加一些标签，直到你让它工作（正确传递 html ng-content）

请注意，它是1.3.xSideDrawer 的形式，我相信有一些变化1.4.x会明显改变您的引导文件，但处理方式保持不变。

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

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