Nativescript: Не могу перезаписать ActionBar в шаблоне

Question

В настоящее время я изучаю Nativescript и хочу реализовать пример приложения Android с Angular2.

Когда я направляюсь к компоненту, который должен переписывать начальную страницу по умолчанию ActionBar в шаблоне с пользовательским названием и кнопкой навигации, ничего не происходит.

Мой компонент с пользовательским 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, которые, похоже, реализуют его аналогичным образом.

Что нужно сделать по-другому, чтобы изменить ActionBar в шаблоне для Android-приложения?

---

Update

Когда я беру 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);