Nativescript：无法覆盖模板中的ActionBar-Java 学习之路

我目前正在学习Nativescript并希望使用Angular2实现一个示例Android应用程序 .

当我路由到一个组件，该组件将使用自定义 Headers 和导航按钮覆盖模板中的默认可见初始页 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 {}

Headers 只能通过 page.actionBar.title = "MyGoals" 以编程方式更改，但在这种情况下我不希望这样 .

我试图依靠Nativescript ActionBar Doc和Sample Groceries，这似乎同样实现它 .

在Android应用程序的模板中更改ActionBar必须采取哪些不同的措施？

Update

当我在功能模块中使用this代码并分离TestComponent时，操作栏不再适用于TestComponent - 它显示默认 Headers .

// 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);

1 回答

那里！您的配置似乎正在运行 . 虽然 <page-router-outlet> 标签在 TestComponent 中没有意义 . 这是一个简单的nativescript-angular应用程序，可正确更新操作栏：

// 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);

回复于 2024-04-27T16:13:32+08:00

Nativescript：无法覆盖模板中的ActionBar

1 回答

相关问题