#angular #nativescript #angular2-nativescript #nativescript-angular
Вопрос:
Я пытаюсь добавить верхнюю панель действий на каждый экран приложения, но она не отображается. Я использую 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>
Заранее спасибо.
Ответ №1:
Если ваши маршрутизируемые компоненты загружены лениво, т. е. app-routing.module.ts
Выглядит примерно так:
{
path: 'home',
loadChildren: () => import('./home/home.module').then(m => m.HomeModule)
}
Затем вам также потребуется импортировать модули SharedComponentsModule
функций, чтобы получить доступ к этим компонентам.
Ответ №2:
Поэтому мне удалось решить эту проблему, удалив файлы модулей из каждого компонента экрана и объявив их все в одном файле общих компонентов. Затем я импортировал этот файл в файл 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,
},