Блог

Я пытаюсь добавить верхнюю панель действий на каждый экран приложения, но она не отображается. Я использую nativescript с Angular. Я настроил модуль SharedComponentsModule, в котором есть компонент HeaderComponent, и я экспортирую компонент headercomponent. Затем я импортирую модуль SharedComponentsModule в файл app.module. При этом я ожидаю, что он будет работать на любом экране, но это не так. В чем может быть проблема? Разве Nativescript не позволяет обмениваться компонентами между экранами или как я должен это сделать?

На прикрепленных фотографиях показан заголовок, который я пытаюсь добавить на каждый экран. экран1
экран2

Модуль общих компонентов:

 import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
import { NativeScriptCommonModule } from 'nativescript-angular/common';
import { HeaderComponent } from './header/header.component';

@NgModule({
  declarations: [HeaderComponent],
  imports: [NativeScriptCommonModule],
  exports: [HeaderComponent],
  schemas: [NO_ERRORS_SCHEMA],
})
export class SharedComponentsModule {}

 

Модуль приложения

 import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
import { NativeScriptModule } from 'nativescript-angular/nativescript.module';
import { AppRoutingModule } from './app-routing.module';

import { AppComponent } from './app.component';
import { SharedComponentsModule } from './components/shared-components.module';

@NgModule({
  bootstrap: [AppComponent],
  imports: [SharedComponentsModule, NativeScriptModule, AppRoutingModule],
  declarations: [AppComponent],
  schemas: [NO_ERRORS_SCHEMA],
})
export class AppModule {}

 

header-component.html

 
<ActionBar class="action-bar" (loaded)="onActionBarLoaded($event)">
  <GridLayout
    columns="auto,*,auto"
    orientation="horizontal"
    ios:padding="0 10"
    height="100%"
    width="100%"
  >
    <Label
      *ngIf="isBackIcon"
      ios:horizontalAlignment="left"
      android:horizontalAlignment="left"
      row="0"
      col="0"
      class="fas back"
      text="amp;#xf060;"
      (tap)="goBack()"
    >
    </Label>
    <Image
      ios:horizontalAlignment="{{isBackIcon ? 'center' : 'left'}}"
      android:horizontalAlignment="{{isBackIcon ? 'center' : 'left'}}"
      class="logo"
      row="0"
      col="1"
      src='~/assets/images/logo1.png'></Image>
  </GridLayout>

  <ActionItem
    text="Home"
    ios.position="right"
    android.position="popup"
    (tap)="onHome()">
  </ActionItem>
  <ActionItem
    text="About"
    ios.position="right"
    android.position="popup"
    (tap)="onAbout()">
  </ActionItem>

  <ActionItem
    text="My Account"
    ios.position="right"
    android.position="popup"
    (tap)="onAccount()">
  </ActionItem>
  <ActionItem
    text="FAQ"
    ios.position="right"
    android.position="popup"
    (tap)="onFaq()">
  </ActionItem>
  <ActionItem
    text="Terms and Conditions"
    ios.position="right"
    android.position="popup"
    (tap)="onTerms()">
  </ActionItem>
  <ActionItem
    text="Sign Out"
    ios.position="right"
    android.position="popup"
    (tap)="onSignout()">
  </ActionItem>
</ActionBar>

 

заголовок-компонент.ts

 import { Component, Input, OnInit } from '@angular/core';
import { RouterExtensions } from 'nativescript-angular/router';

declare const android;

@Component({
  selector: 'Header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.css'],
})
export class HeaderComponent implements OnInit {
  @Input() isBackIcon: boolean;

  constructor(private routerExtensions: RouterExtensions) {}
 

home-component.html

 <Header [isBackIcon]="backIcon"></Header>

<GridLayout>
  <label text="Some test text"></label>
</GridLayout>

 

Заранее спасибо.

Если ваши маршрутизируемые компоненты загружены лениво, т. е. app-routing.module.ts Выглядит примерно так:

 {
    path: 'home',
    loadChildren: () => import('./home/home.module').then(m => m.HomeModule)
}
 

Затем вам также потребуется импортировать модули SharedComponentsModule функций, чтобы получить доступ к этим компонентам.

Поэтому мне удалось решить эту проблему, удалив файлы модулей из каждого компонента экрана и объявив их все в одном файле общих компонентов. Затем я импортировал этот файл в файл app.module.ts. Таким образом, во всем проекте у меня есть только два модуля. Поэтому, когда я выполняю маршрутизацию в файле app-routing.module, направляйтесь к компоненту экрана, а не к модулю. Это сработало хорошо, и у меня есть компонент заголовка на каждом экране.

приложение-маршрутизация.модуль.ts

 { path: '', redirectTo: '/home', pathMatch: 'full' },
  {
    path: 'home',
    component: HomeComponent,
  },
  {
    path: 'about',
    component: AboutComponent,
  },
  {
    path: 'terms',
    component: TermsComponent,
  },
  {
    path: 'account',
    component: AccountComponent,
  },
  {
    path: 'edit-account',
    component: EditAccountComponent,
  },