Проблема при попытке скрыть панель действий с общим кодом

Question

Я создал приложение Angular + nativescript. Я пытаюсь скрыть панель действий (как и многие люди).

Я сделал двух помощников по обслуживанию. Оба имеют одинаковую подпись. Один для Интернета, а другой для мобильных устройств. Что касается мобильного помощника, я имею дело с компонентом TNS Page, который я добавляю.

Но когда я запускаю мобильное приложение, панель действий всегда здесь.

Помощники

экшен-бар-helper.service.tns.ts:

import { Injectable } from "@angular/core";
import { Page } from "tns-core-modules/ui/page/page";
@Injectable()
export class ActionBarHelperService {  
    constructor(private page: Page){

    }

    hideActionBar(){
        this.page.actionBarHidden = true;
    }
}

экшен-бар-helper.service.ts:

import { Injectable } from "@angular/core";

@Injectable()
export  class ActionBarHelperService {    
    constructor(){}
    hideActionBar(){}
}

Общий компонент для мобильных и веб-сайтов

login.component.ts:

@Component({
  selector: 'app-login',
  moduleId: module.id,
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent{

  constructor(private actionBarHelperService: ActionBarHelperService) 
  {
    this.actionBarHelperService.hideActionBar();
  }
}

Кроме того, я установил для createFrameOnBootstrap значение true в main.tns.ts :

import { platformNativeScriptDynamic } from 'nativescript-angular/platform';
import { AppModule } from './app/app.module';

platformNativeScriptDynamic({ createFrameOnBootstrap: true }).bootstrapModule(AppModule);

Я не знаю, поможет ли это, но когда я запускаю свой эмулятор и не устанавливаю для него значение true, появляется ошибка, в которой говорится, что страница пуста:

Successfully synced application org.nativescript.docdoc on device emulator-5554.
JS: Angular is running in the development mode. Call enableProdMode() to enable the production mode.
JS: ERROR TypeError: Cannot set property 'actionBarHidden' of null
JS: ERROR CONTEXT {
JS:   "view": {
JS:     "def": {
JS:       "nodeFlags": 33669121,
JS:       "rootNodeFlags": 33554433,
JS:       "nodeMatchedQueries": 0,
JS:       "flags": 0,
JS:       "nodes": [
JS:         {
JS:           "nodeIndex": 0,
JS:           "parent": null,
JS:           "renderParent": null,
JS:           "bindingIndex": 0,
JS:           "outputIndex": 0,
JS:           "checkIndex": 0,
JS:           "flags": 33554433,
JS:           "childFlags": 114688,
JS:           "directChildFlags": 114688,
JS:           "childMatchedQueries": 0,
JS:           "matchedQueries": {},
JS:           "matchedQueryIds": 0,
JS:           "references": {},
JS:           "ngContentIndex": null,
JS:           "childCount": 1,
JS:           "bindings": [],
JS:           "bindingFlags": 0,
JS:           "outputs": [],
JS:           "element": {
JS:             "ns": "",
JS:             "name": "app-login",
JS:             "attrs": [],
JS:             "template": null,
JS:             "componentProvider": {
JS:               "nodeIndex": 1,
JS:               "parent": "[Circular]",
JS:               "renderParent": "[Circular]",
JS:               "bindingIndex":...

Есть идеи или решения?

РЕШЕНИЕ:

Благодаря @Manoj, я написал директиву. Смотрите ниже:

import { Directive } from '@angular/core';
import { Page } from 'tns-core-modules/ui/page/page';

@Directive({
  selector: '[hideActionBar]'
})
export class HideActionBarDirective {
  constructor(private page: Page) {
    this.page.actionBarHidden = true;
  }
}

и теперь в моем login.component.tns.html :

<StackLayout hideActionBar>
    <Button text="login works!" class="btn btn-primary"></Button>
</StackLayout>

Answer 1

Поскольку ActionBarHelperService является зависимостью для LoginComponent, служба должна быть создана еще до создания страницы.

Может быть, вы могли бы передать страницу в качестве аргумента методу hideActionBar Или просто установить атрибут visibility для тега ActionBar в login.component.html Или использовать директиву вместо службы.

Answer 2

ActionBarHelperService ожидает аргумент (страницу) в конструкторе (

constructor(private page: Page)

) но когда вы создаете его экземпляр в login.component.ts следующим образом, никакие аргументы не передаются в ActionBarHelperService

constructor(private actionBarHelperService: ActionBarHelperService)