如何使用 Angular 将组件共享到 Nativescript 中的每个屏幕

Question

我正在尝试向应用程序的每个屏幕添加一个顶部操作栏，但没有出现。我正在使用带有 Angular 的 nativescript。我已经设置了一个具有 HeaderComponent 的 SharedComponentsModule，并且我导出了 header 组件。然后我在 app.module 文件中导入 SharedComponentsModule。有了这个，我希望它能在任何屏幕上工作，但事实并非如此。可能是什么问题呢？ Nativescript 不允许在屏幕之间共享组件，或者我应该怎么做？

所附图片显示 header 我正在尝试添加到每个屏幕。 screen1 screen2

共享组件模块：

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 {}

AppModule

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="&#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>

header-component.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>

提前致谢。

Answer 1

如果您的路由组件是延迟加载的，即 app-routing.module.ts 看起来像这样：

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

然后您还需要在功能模块中导入 SharedComponentsModule 才能访问这些组件。

Answer 2

所以我设法通过从每个屏幕组件中删除模块文件并将它们全部声明在一个 shared-components 文件中来解决这个问题。然后我在 app.module.ts 文件中导入了这个文件。所以在整个项目中我只有两个模块。因此，当在 app-routing.module 文件中进行路由时，路由到屏幕组件而不是模块。这很有效，我在每个屏幕上都有 header 组件。

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,
  },

如何使用 Angular 将组件共享到 Nativescript 中的每个屏幕

How do I share a component to every screen in Nativescript using Angular

angular

nativescript

angular2-nativescript

nativescript-angular