NativeScript: как показать боковой ящик с домашней страницы?

Question

Я пишу приложение с Angular 8 и NativeScript 6.4.1.

Я хочу реализовать Side Drawer, который будет отображаться только при нажатии кнопки гамбургера на домашней странице. Я не хочу, чтобы он показывал в другое время.

Я прочитал этот документ: https://docs.nativescript.org/angular/ui/ng-components/ng-SideDrawer/getting-started#initialization

Я пытался установить этот боковой ящик, и он продолжает давать мне эта ошибка:

"TypeError: Cannot read property 'showDrawer' of undefined"

Вот моя игровая площадка: https://play.nativescript.org/?template=play-ng&id=ujiNiC&v=2

фрагмент кода:

export class HomeComponent implements OnInit {

    @ViewChild(SideDrawerComponent, { static: false }) public drawerComponent: SideDrawerComponent;
    private drawer: RadSideDrawer;

    constructor() {
    }

    ngOnInit(): void {
    }

    public openSideDrawer() {
        this.drawer.showDrawer();
    }
}

Answer 1

Короче говоря:

Вы неправильно настраиваете RadSideDrawer. Вам нужно установить ящик в представлении root и пометить содержимое ящика с помощью селектора tkDrawerContent, а маршрутизатор angular с селектором tkMainContent.

Подробно вам необходимо:

Во-первых, установите RadSideDrawer в самом верхнем компоненте вашего приложения, т.е. на app.component. html, чтобы было содержимое бокового ящика, помеченное селектором tkDrawerContent, и остальное содержимое (содержимое вашего приложения), помеченное селектором tkMainContent. Если вы используете маршрутизатор Angular, добавьте его в <page-router-outlet></page-router-outlet>, как показано ниже:

app.component. html:

<RadSideDrawer>
    <GridLayout tkDrawerContent rows="auto, *">
        <!-- content of the drawer -->
    </GridLayout>

    <page-router-outlet tkMainContent></page-router-outlet>
</RadSideDrawer>

Вы можете визуализировать любой пользовательский компонент, который у вас есть вместо / внутри tkDrawerContent с пометкой GridLayout выше.

Во-вторых, обязательно импортируйте NativeScriptUISideDrawerModule в модуль, который загружает компонент с <RadSideDrawer> внутри него. В моем примере это app.module .

app.module.ts:

import { NativeScriptUISideDrawerModule } from 'nativescript-ui-sidedrawer/angular';


@NgModule({
    bootstrap: [
        AppComponent
    ],
    imports: [
        NativeScriptModule,
        AppRoutingModule,
        NativeScriptUISideDrawerModule
    ],
    declarations: [
        AppComponent
    ],
    schemas: [
        NO_ERRORS_SCHEMA
    ]
})

В-третьих, открыть / закрыть боковой ящик, вам нужно получить к нему доступ через приложение RootView. Внутри вашего компонента добавьте:

home.compon enet .ts:

Импорт:

import { RadSideDrawer } from 'nativescript-ui-sidedrawer';

И внутри вашего класса:

public openSideDrawer() {
    const sideDrawer = <RadSideDrawer>app.getRootView();
    sideDrawer.showDrawer();
}

Если ваше приложение становится очень сложным с несколькими страницами и маршрутами, то вы можете добавить код для открытия / закрытия ящика в службе пользовательского интерфейса, введенной в root, или в общий пользовательский компонент actionBar.

Исправление для вашего примера: игровая площадка .

С днем ​​рождения!