使用angular模板在nativescript中隐藏状态栏的正确方法是什么？

Question

如何隐藏特定活动的状态栏？

我发现了类似的问题，但是没有一个答案对我有用。

Ref # 1

Ref # 2

Ref # 3

Ref # 4

该应用程序每次都崩溃，并向我显示在genymotion andriod VM上运行我的应用程序时错误无法读取属性<div class="container p-5"> <div class="row"> <div class="col-12 text-right"> <div class="accordion" id="newNote"> <div class="card"> <h4 class="mb-0"> <button type="button" class="btn text-white green accent-3 btn-lg btn-block" data-toggle="collapse" data-target="#noteAdd" aria-expanded="true" aria-controls="collapseOne"> Dodaj zadanie<mdb-icon fas icon="plus-circle" class="ml-1"></mdb-icon> </button> </h4> <div id="noteAdd" class="collapse" aria-labelledby="headingOne" data-parent="#newNote"> <div class="card-body"> <div class="container p-2"> <form (ngSubmit)="onSubmit()" class="row"> <div class="col-6"> <div class="md-form"> <input type="text" id="taskitem" class="form-control" mdbInput [(ngModel)]="task.title" name="task"> <label for="taskitem">Dodaj zadanie</label> </div> </div> <div class="col-6"> <div class="md-form"> <select class="form-control" [(ngModel)]="task.list" name="list"> <option selected value="todo">Do zrobienia</option> <option value="progress">W trakcie</option> <option value="done">Wykonane</option> <option value="cancelled">Anulowane</option> </select> </div> </div> <div class="col-12"> <div class="md-form"> <textarea class="md-textarea form-control" rows="5" id="noteText" type="text" length="160" mdbCharCounter mdbInput [(ngModel)]="task.note" name="note"></textarea> <label for="noteText">Dodaj notatkę:</label> </div> </div> <div class="col-12 text-right"> <input type="submit" value="Dodaj" mdbBtn color="default"> </div> </form> </div> </div> </div> </div> </div> </div> <div class="container p-4"> <div class="row row-height"> <div class="col-sm-3" borderColor="border-info"> <div class="card cyan accent-4"> <div class="card-header"> <mdb-card-text class="text-white text-center">Zrób <span [ngSwitch]="mainList.todo.length >0"> <span *ngSwitchCase="true"> <span class="badge badge-light badge-pill mx-2"> {{mainList.todo.length}}</span> </span> <span *ngSwitchCase="false"> <span><i class="far fa-clock mx-2"></i></span> </span> </span> </mdb-card-text> </div> <cdk-drop id="todo" class="listme list-group card-margin" #todoList [data]="mainList.todo" [connectedTo]="[progressList, doneList, cancelledList, deleteList]" (dropped)="drop($event)"> <div class="list-group-item list-group-item-info" *ngIf="mainList.todo.length < 1"> <p class="grey-text text-center">pusto</p> </div> <div class="list-group-item-action list-group-item-info" *ngFor="let item of mainList.todo; let i = index "> <h6 class="note note-info" cdkDrag>{{ item.title.substring(0,20) | titlecase }}</h6> <article (click)="changeModal(item)" data-toggle="modal" data-target="#openModal" class="note-margin"> <small type="button" class="card-link text-justify"> {{ item.note.substring(0,100) }} ... </small> </article> <p><small class="note-margin"> {{ item.dateAdded | date:'dd/MM/yyyy HH:mm' }}</small></p> </div> </cdk-drop> </div> </div> <div class="col-sm-3" borderColor="border-warning"> <div class="card bg-warning"> <div class="card-header"> <mdb-card-text class="text-white text-center">W trakcie <span [ngSwitch]="mainList.progress.length >0"> <span *ngSwitchCase="true"> <span class="badge badge-light badge-pill mx-2"> {{mainList.progress.length}}</span> </span> <span *ngSwitchCase="false"> <span><i class="far fa-clock mx-2"></i></span> </span> </span> </mdb-card-text> </div> <cdk-drop id="progress" class="listme list-group card-margin" #progressList [data]="mainList.progress" [connectedTo]="[todoList, doneList, cancelledList, deleteList]" (dropped)="drop($event)"> <div class="list-group-item list-group-item-warning" *ngIf="mainList.progress.length < 1"> <p class="grey-text text-center">pusto</p> </div> <div class="list-group-item-action list-group-item-warning" *ngFor="let item of mainList.progress; let i = index "> <h6 class=" note note-warning" cdkDrag>{{ item.title.substring(0,20) | titlecase }}</h6> <article (click)="changeModal(item)" data-toggle="modal" data-target="#openModal" class="note-margin"> <small type="button" class="card-link text-justify"> {{ item.note.substring(0,100) }} ... </small> </article> <p><small class="note-margin"> {{ item.dateAdded | date:'dd/MM/yyyy HH:mm' }}</small></p> </div> </cdk-drop> </div> </div> <div class="col-sm-3" borderColor="border-success"> <div class="card teal accent-4"> <div class="card-header"> <mdb-card-text class="text-white text-center">Zrobione <span [ngSwitch]="mainList.done.length >0"> <span *ngSwitchCase="true"> <span class="badge badge-light badge-pill mx-2"> {{mainList.done.length}}</span> </span> <span *ngSwitchCase="false"> <span><i class="far fa-check-circle mx-2"></i></span> </span> </span> </mdb-card-text> </div> <cdk-drop id="done" class="listme list-group card-margin" #doneList [data]="mainList.done" [connectedTo]="[todoList, progressList, cancelledList, deleteList]" (dropped)="drop($event)"> <div class="list-group-item list-group-item green accent-1" *ngIf="mainList.done.length < 1"> <p class="grey-text text-center">pusto</p> </div> <div class="list-group-item-action list-group-item-success" *ngFor="let item of mainList.done; let i = index "> <h6 class=" note note-success" cdkDrag>{{ item.title.substring(0,20) | titlecase }}</h6> <article (click)="changeModal(item)" data-toggle="modal" data-target="#openModal" class="note-margin"> <small type="button" class="card-link text-justify"> {{ item.note.substring(0,100) }} ... </small> </article> <p><small class="note-margin"> {{ item.dateAdded | date:'dd/MM/yyyy HH:mm' }}</small></p> </div> </cdk-drop> </div> </div> <div class="col-sm-3" borderColor="border-light"> <div class="card bg-light"> <div class="card-header"> <mdb-card-text class="dark-grey-text text-center">Anulowane <span [ngSwitch]="mainList.cancelled.length >0"> <span *ngSwitchCase="true"> <span class="badge badge-light badge-pill mx-2"> {{mainList.cancelled.length}}</span> </span> <span *ngSwitchCase="false"> <span><i class="fas fa-minus-circle mx-2"></i></span> </span> </span> </mdb-card-text> </div> <cdk-drop id="cancelled" class="listme list-group card-margin" #cancelledList [data]="mainList.cancelled" [connectedTo]="[todoList, progressList, doneList, deleteList]" (dropped)="drop($event)"> <div class="list-group-item list-group-item-light" *ngIf="mainList.cancelled.length < 1"> <p class="grey-text text-center">pusto</p> </div> <div class="list-group-item-action list-group-item-light" *ngFor="let item of mainList.cancelled; let i = index "> <h6 class=" note note-light" cdkDrag>{{ item.title.substring(0,20) | titlecase }}</h6> <article (click)="changeModal(item)" data-toggle="modal" data-target="#openModal" class="note-margin"> <small type="button" class="card-link text-justify"> {{ item.note.substring(0,100) }} ... </small> </article> <p><small class="note-margin"> {{ item.dateAdded | date:'dd/MM/yyyy HH:mm' }}</small></p> </div> </cdk-drop> </div> </div> </div> <div class="container p-2"></div> <div class="row"> <div class="col"> <div class="card bg red darken-3"> <div class="card-header"> <mdb-card-text class="text-white text-center">Usunięte <span [ngSwitch]="mainList.delete.length >0"> <span *ngSwitchCase="true"> <span class="badge badge-light badge-pill mx-2"> {{mainList.delete.length}}</span> </span> <span *ngSwitchCase="false"> <span><i class="fas fa-times-circle mx-2"></i></span> </span> </span> </mdb-card-text> </div> <cdk-drop id="delete" class="listme list-group card-margin" #deleteList [data]="mainList.delete" [connectedTo]="[todoList, progressList, doneList, canceledList]" (dropped)="drop($event)"> <div class="list-group-item list-group-item-light" *ngIf="mainList.delete.length < 1"> <p class="grey-text text-center">pusto</p> </div> <div class="list-group-item-action list-group-item-danger" *ngFor="let item of mainList.delete; let i = index "> <h6 class=" note note-danger" cdkDrag>{{ item.title.substring(0,50) | titlecase }}</h6> <article (click)="changeModal(item)" data-toggle="modal" data-target="#openModal" class="note-margin"> <small type="button" class="card-link text-justify"> {{ item.note.substring(0,100) }} ... </small> </article> <p><small class="note-margin"> {{ item.dateAdded | date:'dd/MM/yyyy HH:mm' }}</small></p> </div> </cdk-drop> <button (click)="clearList()" class="btn btn-red darken-3 btn-sm btn-block btn-red darken-3"> Wyczyść<mdb-icon fas icon="trash-alt" class="ml-1"></mdb-icon> </button> </div> </div> </div> </div> <!-- Modal --> <div class="modal fade" id="openModal" tabindex="5" role="dialog" aria-labelledby="exampleModalScrollableTitle" aria-hidden="true"> <div class="modal-dialog modal-dialog-scrollable" role="document"> <div class="modal-content"> <div *ngIf="!editState" class="modal-header"> <h6 class="blockquote bq-primary" id="exampleModalScrollableTitle">{{currentTask.title | titlecase}} </h6> </div> <div *ngIf="!editState" class="modal-body"> <small class="text-muted">Data utworzenia: {{currentTask.dateAdded | date:'dd/MM/yyyy HH:mm'}}</small> </div> <div class="modal-body"> <div *ngIf="!editState"> <span class="h6 text-muted">Notatki:</span> <p class="text-justify text-muted">{{currentTask.note}}</p> </div> <!--- Edit modal --> <div *ngIf="editState"> <form (ngSubmit)="updateItem(currentTask)"> <div class="col-12 text-center"> <small class="text-warning">Edycja zadania</small> </div> <div class="col-12 text-left"> <div class="md-form"> <h6 class="blockquote bq-warning">Nowy tytuł:</h6> <input type="text" class="md-textarea form-control uk-text-left-small" mdbInput [(ngModel)]="currentTask.title" name="task"> </div> <div class="md-form"> <h6 class=" blockquote bq-warning">Nowa notatka:</h6> <textarea class="md-textarea form-control uk-text-left-small" rows="4" type="text" length="160" mdbCharCounter mdbInput [(ngModel)]="currentTask.note" name="note"></textarea> </div> </div> <div class="col-12 text-center"> <button type="button" class="btn btn-outline-success btn-sm mr-2" data-dismiss="modal" title="Ok, zamknij"><i class="fas fa-check-circle mx-2"></i> </button> </div> </form> </div> <!--- Edit modal end --> </div> <div class="modal-footer"> <!------ update task -----> <div *ngIf="!editState"> <span class="visible"> <button (click)="editTask($event, item)" class="btn btn-outline-warning waves-effect btn-sm" title="Edytuj"> <i class="fas fa-edit"></i></button> <!------ update ends -----> <button class="btn btn-outline-danger btn-sm" title="Usuń"> <mdb-icon far icon="trash-alt"></mdb-icon> </button> <button type="button" class="btn btn-outline-info btn-sm" data-dismiss="modal"> <i class="fas fa-check-circle mx-2"></i> </button> </span> </div> </div> </div> </div> </div> <!-- Modal ends --> </div>。以下是简短的错误屏幕截图

下面是我的home.component.ts代码

getWindow

请帮助我。谢谢。

Answer 1

您可能想使用nativescript-status-bar插件。

import * as statusBar from 'nativescript-status-bar'

// Show
statusBar.show();

// Hide
statusBar.hide();

Answer 2

如果您正在寻找解决方案以全屏查看应用程序并隐藏状态栏，请使用：

var activity = app.android.foregroundActivity || app.android.startActivity;
var window = activity.getWindow();
window.clearFlags(android.view.WindowManager.LayoutParams.FLAG_FULLSCREEN)

Answer 3

if(isAndroid){
    Application.android.startActivity.getWindow().getDecorView().setSystemUiVisibility(android.view.View.SYSTEM_UI_FLAG_FULLSCREEN)
}

上面的代码可让您在android设备上隐藏状态栏，有关此代码的片段在Nativescript7及更高版本上工作正常。

您还可以在onNgInit方法中实现此功能，以便在导航到页面或组件时隐藏状态栏。