How actually does ActionBar work?


#1

I have a NativeScript-Angular demo app with below version and project file structure.

Version

  • nativescript: 3.4.1
  • nativescript-cli: 3.4.1
  • nativescript-angular: 5.2.0

Project File Struture

  • main
    • home
      • home.component.html
      • home.component.ts
    • settings
      • settings.component.html
      • settings.component.ts
    • main.module.ts
    • main-routing.module.ts
    • main.component.html
    • main.component.ts
  • personal-settings
    • personal-settings.module.ts
    • personal-settings-routing.module.ts
    • personal-settings.component.html
    • personal-settings.component.ts
  • shared
    • components
      • master-page
        • master-page.component.html
        • master-page.component.ts
    • shared.module.ts
  • app.module.ts
  • app.module.ts
  • app.component.html
  • app.component.ts

master-page.component.html

<GridLayout rows="*, auto">
    <ng-content row="0"></ng-content>
    <ActivityIndicator class="activity-indicator" [busy]="hasPendingRequest" [visibility]="hasPendingRequest ? 'visible' : 'collapse'"
    horizontalAlignment="center" verticalAligment="center"></ActivityIndicator>
</GridLayout>

home.component.html

<op-master-page>
    <ActionBar class="action-bar">
        <Label class="action-bar-title" [text]="title"></Label>
    </ActionBar>
    <TabView (selectedIndexChanged)="onSelectedIndexChanged($event)">
        <StackLayout *tabItem="{title: 'Home'}">
            <op-home></op-home>
        </StackLayout>
        <StackLayout *tabItem="{title: 'Service'}">
            <Label text="Service"></Label>
        </StackLayout>
        <StackLayout *tabItem="{title: 'Settings'}">
            <op-settings></op-settings>
        </StackLayout>
    </TabView>
</op-master-page>

personal-settings.component.html

<op-master-page>
    <ActionBar class="action-bar" title="New ActionBar"></ActionBar>
    <ActionBarExtension></ActionBarExtension>
</op-master-page>

My issue is, what ever I put another ActionBar or ActionBarExtension in personal-settings.component.html, there is no any effect. What I did wrong?

The output in chrome element tab of the main.component.html with worked ActionBar

<ActionBar class="action-bar">
    <Label class="action-bar-title" text="New Title"></Label>
</ActionBar>

The output in chrome element tab of the personal-settings.component.html with not worked ActionBar

<ActionBar></ActionBar>

I also find there is a tip on doc website.

If more than one component defines an ActionBar - the last definition will be respected. You can also add items to the current ActionBar.

I don’t quite understand what it means.

Any help would be appreciated.


#2

I found the solution via reading the source code of official demo project.

We have to import the NativeScriptCommonModule in each separate feature module in order to make it work.