我构建了一个 Angular + nativescript 应用程序。我正在尝试隐藏操作栏(就像很多人一样)。
我制作了两个服务助手。两者都有相同的签名。一种用于网络,另一种用于移动。对于移动助手,我处理我注入(inject)的 TNS 页面组件。
但是当我运行移动应用程序时,操作栏始终在这里。
助手
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();
}
}
此外,我已在 main.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>
最佳答案
由于 ActionBarHelperService
是 LoginComponent
的依赖项,因此即使在创建页面之前也必须实例化该服务。
也许您可以将页面作为参数传递给 hideActionBar
方法,或者只需在 中的
或者使用指令而不是服务。ActionBar
标记上设置 visibility
属性login.component.html
关于android - 尝试使用共享代码隐藏操作栏时出现问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54354774/