Nativescript：無法覆蓋模板中的ActionBar

Question

我目前正在學習Nativescript，並希望使用Angular2實現示例Android應用程序。

當我使用自定義標題和導航按鈕找到覆蓋默認可見起始頁面ActionBar的組件時，什麼都不會發生。

我的組件自定義動作條：

@Component({ 
    template: ` 
    <ActionBar title="CustomTitle"> 
    <NavigationButton text="Back" android.systemIcon="ic_menu_back"></NavigationButton> 
    </ActionBar> 

    <StackLayout> 
     <Label text="Hello World" textWrap="true"></Label> 
     <page-router-outlet></page-router-outlet> 
    </StackLayout> 
    ` 
}) 
export class TestComponent {} 

標題只能通過page.actionBar.title = "MyGoals"程序改變，但我不想在這種情況下。

我試圖依靠Nativescript ActionBar Doc和Sample Groceries似乎實現它類似。

要改變Android應用程序模板中的ActionBar，必須採取什麼不同的措施？

---

更新

當我需要的功能模塊中this代碼和獨立TestComponent，操作欄已不爲TestComponent工作 - 它顯示了默認的標題。

// main.ts 
import { platformNativeScriptDynamic, NativeScriptModule } from "nativescript-angular/platform"; 
import { NgModule, Component } from "@angular/core"; 
import { Routes } from "@angular/router"; 
import { NativeScriptRouterModule } from "nativescript-angular/router"; 

@Component({ 
    template: `<page-router-outlet></page-router-outlet>` 
}) 
export class AppComponent { } 

@Component({ 
    template: ` 
     <ActionBar title="Home"></ActionBar> 
     <StackLayout> 
      <Label text="Home component" textWrap="true"></Label> 
      <Button text="test" [nsRouterLink]="['/test']"></Button> 
     </StackLayout> 
    ` 
}) 
export class HomeComponent { } 

@Component({ 
    template: ` 
     <ActionBar title="Test"></ActionBar> 
     <StackLayout> 
      <Label text="Test component" textWrap="true"></Label> 
      <Button text="home" [nsRouterLink]="['/']"></Button> 
     </StackLayout> 
    ` 
}) 
export class TestComponent { } 


const testRoutes: Routes = [ 
    { 
     path: "test", 
     component: TestComponent 
    } 
] 

@NgModule({ 
    declarations: [TestComponent], 
    imports: [ 
     NativeScriptRouterModule.forChild(testRoutes) 
    ], 
}) 
class TestComponentModule { } 


const appRoutes: Routes = [ 
    { 
     path: "", 
     pathMatch: "full", 
     component: HomeComponent 
    } 
] 

@NgModule({ 
    declarations: [AppComponent, HomeComponent], 
    bootstrap: [AppComponent], 
    imports: [ 
     NativeScriptModule, 
     NativeScriptRouterModule, 
     NativeScriptRouterModule.forRoot(appRoutes), 
     TestComponentModule 
    ], 
}) 
class AppComponentModule { } 

platformNativeScriptDynamic().bootstrapModule(AppComponentModule); 

Answer 1

那裏！ 你的配置似乎正在工作。儘管<page-router-outlet>標籤在TestComponent中沒有意義。這裏是一個簡單的原生腳本角應用程序，它可以正確更新操作欄：

// main.ts 
import { platformNativeScriptDynamic, NativeScriptModule } from "nativescript-angular/platform"; 
import { NgModule, Component } from "@angular/core"; 
import { Routes } from "@angular/router"; 
import { NativeScriptRouterModule } from "nativescript-angular/router"; 

@Component({ 
    template: `<page-router-outlet></page-router-outlet>` 
}) 
export class AppComponent { } 

@Component({ 
    template: ` 
     <ActionBar title="Home"></ActionBar> 
     <StackLayout> 
      <Label text="Home component" textWrap="true"></Label> 
      <Button text="test" [nsRouterLink]="['/test']"></Button> 
     </StackLayout> 
    ` 
}) 
export class HomeComponent { } 

@Component({ 
    template: ` 
     <ActionBar title="Test"></ActionBar> 
     <StackLayout> 
      <Label text="Test component" textWrap="true"></Label> 
      <Button text="home" [nsRouterLink]="['/']"></Button> 
     </StackLayout> 
    ` 
}) 
export class TestComponent {} 

const routes: Routes = [ 
    { 
     path: "", 
     pathMatch: "full", 
     component: HomeComponent 
    }, 
    { 
     path: "test", 
     component: TestComponent 
    } 
] 

@NgModule({ 
    declarations: [ AppComponent, HomeComponent, TestComponent ], 
    bootstrap: [ AppComponent ], 
    imports: [ 
     NativeScriptModule, 
     NativeScriptRouterModule, 
     NativeScriptRouterModule.forRoot(routes) 
    ], 
}) 
class AppComponentModule {} 

platformNativeScriptDynamic().bootstrapModule(AppComponentModule);