Проект совместного использования кода Angular + Nativescript Удалить панель действий - PullRequest
0 голосов
/ 12 мая 2019

Мой проект использует проект совместного использования кода Angular + Nativescript для создания веб-приложений, а также мобильных устройств для Android и IOS.

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

Я попытался добавить <Page actionBarHidden="true"></page>, однако это не сработало вообще в app.component или в других компонентах, которые содержат маршруты, такие как home.component с маршрутом home. Такие как:

<Page actionBarHidden="true">
  <StackLayout orientation="vertical">
    <Image src="res://buy" stretch="none" horizontalAlignment="center"></Image>
  </StackLayout>
</Page>

Я также попробовал подход специально для Android, чтобы посмотреть, смогу ли я исправить это с помощью файла AndroidManifest.xml, как если бы я сделал собственное Android-приложение, обновив манифест Android, чтобы убрать панель действий. Для проверки работоспособности я также пытался использовать его через styles.xml, например:

<style name="AppThemeNoActionBar" parent="AppTheme">
    <item name="windowActionBar">false</item>
    <item name="windowNoTitle">true</item>
</style>

После этих неудачных попыток я попробовал следующий код, рекомендованный другими участниками, включая Page, такой как:

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {

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

Проблема с этим подходом заключается в том, что это решение работает, мне нужно создать файл tns для каждого компонента, у которого есть маршрут, просто чтобы вызвать его, чтобы полностью удалить панель приложения, потому что каждая страница, кажется, обрабатывает свою собственную панель приложения. , Сейчас это не очень удобно для поддержки в больших масштабах, а также заставляет меня создавать файл tns для всех компонентов, имеющих маршрут.

Наконец, я видел пример, где у нас есть сервис, который имеет эту логику для this.page.actionBarHidden, а также rootFrame.actionBarVisibility = 'never', и вы бы назвали это в файле component.ts, не создавая файл component.tns.ts, однако Проблема в том, что теперь вам нужно создать обычную службу с вызываемой пустой функцией, создать файл tns этой службы для реальной логики, а также вызывать его в каждом компоненте, который имеет маршрут.

Как вы можете видеть, некоторые решения вообще не будут работать, а другие требуют большого количества дополнительного кода и поддержки, особенно по мере роста приложения, что делает их не очень желательными решениями.

Я буду продолжать изучать это, а также считаю, что для этого должно быть чистое решение.

Ответы [ 2 ]

1 голос
/ 12 мая 2019

Вы можете просто установить actionBarVisibility на never на самом page-router-outlet.

<page-router-outlet actionBarVisibility="never"></page-router-outlet>
0 голосов
/ 12 мая 2019

После дополнительных исследований и испытаний я смог найти решение, которое работает как задумано.Кроме того, я объясню причины, по которым некоторые другие методы не работали должным образом.

Прежде всего это <Page actionBarHidden="true">.Согласно моим исследованиям и тестированию, это работает, только если вы разрабатываете только для nativescript, а не как проект совместного использования кода Angular + Nativescript.Причина этого в том, что при использовании Angular для веб-разработки мы используем <router-outlet></router-outlet>, для новичков в Angular это обрабатывает изменение маршрутов в приложении и показывает правильный компонент на основе маршрута.

Теперь, когда мы начинаем делать Nativescript, мы хотели бы повторно использовать как можно больше кода, включая наши маршруты.В этом случае мы используем <page-router-outlet></page-router-outlet> в нашем файле app.component.tns.html.Так же, как Angular, когда мы меняем маршруты, это будет контролировать показ правильного компонента на основе маршрута.

Проблема возникает из-за того, что <page-router-outlet></page-router-outlet> автоматически создает <Page></Page> для нас.Таким образом, размещение одного в нашем шаблоне, будь то app.component.tns.html или home.component.tns.html, не будет работать, потому что оно уже есть, мы просто не можем получить легкую ссылку на него в нашем html-файле.

Для решения проблемыпытаясь сделать это через манифест андроида в вашей папке App_Resources, мне тоже не повезло с этим.Я верю, потому что когда мы используем <page-router-outlet></page-router-outlet> Nativescript внутренне изменяет манифест, чтобы отражать и по умолчанию навязывать нам панель действий.Я попытался установить его несколькими различными способами, и независимо от того, что он одинаковый.Мне удалось заставить его работать, хотя папка Platform, однако я бы не рекомендовал это, поскольку иногда нам нужно удалять и добавлять платформы, и это может привести к тому, что мы забудем или будем вынуждены продолжать реализовывать одно и то же решение, тратя драгоценное время на разработку.

Для следующего выпуска, использующего this.page.actionBarHidden = true;, этот вопрос относится к той же категории, что и первый выпуск.Когда вы попытаетесь сделать это в файле app.component.tns.ts, он никогда не будет работать только с этой командой, потому что мы используем <page-router-outlet></page-router-outlet>.По сути, AppComponent вообще не видит страницу, потому что она ему не принадлежит.Когда приложение загружается, если ваш первый маршрут по умолчанию указывает на домашний компонент, вам нужно будет использовать этот this.page.actionBarHidden внутри домашнего компонента.Однако, чтобы не дать сбой в сети, вам нужно создать tns-файл для каждого компонента, у которого есть маршрут для конкретной логики, и который не практичен с точки зрения удобства обслуживания.

Для последнего выпуска мыне должен дублировать код.В этом случае это будет вызывать функцию для каждого файла component.tns.ts только для того, чтобы удалить то, что нам нужно, для всего приложения.А также для создания дополнительных tns files, которые нам не нужны, и управления другой службой для запуска одного фрагмента кода, который применяется только к nativescript.

Решение

Это самое простое решение, которое я мог бы решить, которое позволяет управлять панелью действий в одном месте, так что ее легко изменить в любое время.Решение состоит в том, чтобы использовать Angular Router.В наших ngOnInit мы подписываемся на события маршрутизаторов.Затем, когда происходит событие Маршрутизатора, мы проверяем и проверяем, является ли это концом Навигации до компонента, на который направляется.На этом этапе, когда эта проверка проходит, приложение уже переместилось на маршрут, и теперь для нас безопасно получить ссылку на этот Frame или Page и удалить панель действий.

Nativescript имеет функциюназывается topMost(), что позволяет нам получить ссылку на отображаемый Frame или Page.Согласно определению их кода: Получает самый верхний кадр в стеке кадров.Приложение обычно имеет один экземпляр кадра.Несколько кадров обрабатывают вложенные (иерархические) сценарии навигации.

Таким образом, используя это, мы можем легко получить ссылку на Page, который в настоящее время отображает кадр.Теперь, когда у нас отображается кадр, мы просто устанавливаем actionBarVisibility в false;

import { Component } from '@angular/core';
import { Page } from 'tns-core-modules/ui/page';
import { Router, NavigationEnd } from '@angular/router';
import { topmost } from 'tns-core-modules/ui/frame/frame';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {

  constructor(private _Router: Router, private page: Page) {

  }

  ngOnInit(): void {

    this._Router.events.subscribe((ev) => {
      if (ev instanceof NavigationEnd) {
        const rootFrame = topmost();
        rootFrame.actionBarVisibility = 'never';
      }
    });
  }
}
...