尝试使用共享代码隐藏操作栏时出现问题

Question

我已经构建了一个 Angular + nativescript 应用程序。我正在尝试隐藏操作栏（就像很多人一样）。

我制作了两个服务助手。两者都有相同的签名。一个用于网络，另一个用于移动。对于移动助手，我处理我注入的 TNS Page 组件。

但是当我运行移动应用时，操作栏总是在这里。

助手

action-bar-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;
    }
}

action-bar-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();
  }
}

另外，我在 ma​​in.tns.ts 中将 createFrameOnBootstrap 设置为 true：

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 方法，或者只是在login.component.html 中的ActionBar 标记上设置visibility 属性，或者使用指令而不是服务。

Answer 2

ActionBarHelperService 期待构造函数中的参数（页面）（

constructor(private page: Page)

) 但是当您通过以下方式在 login.component.ts 中创建它的实例时，ActionBarHelperService 中不会传递任何参数

constructor(private actionBarHelperService: ActionBarHelperService)