4

Telerik Side-drawer を 1 つのビューで動作させることに成功しましたが、それをグローバルに使用できるコンポーネントにすることに行き詰まっています。

すべてのビューにコピーして貼り付けることを避けたいので、再利用可能なコンポーネントにするにはどうすればよいかという質問があります。

4

1 に答える 1

4

したがって、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>

それが行うことは、Angular 作品の通常のディレクティブのように、常に sidedrawer コンテンツ セクション ( ng-contentSideDrawer テンプレート内) にページのコンテンツを生成することです。

唯一欠けているのは、ブートストラップの開始に 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ください。明らかにブートストラップ ファイルを変更する変更があったと思いますが、処理は同じままです。

すべてを SideDrawer テンプレートにラップする必要があることに注意してください。そうしないと、ビュー ドロワーが 2 つになり、フラットになります (SideDrawer には独自の「描画」メソッドがあります)。また、一部のページに SideDrawer が必要ない場合は、ディレクティブを含めないでください。

また、これは通常のディレクティブであるため、スタッフをヘッダーに渡すことができます<your-header variable="variableValue">。alignトップページのモデルと のオプションをこのように切り替えることができますActionBar。

于 2016-09-28T18:52:55.967 に答える