Nativescript:无法覆盖模板中的 ActionBar
Nativescript: Cannot overwrite ActionBar in template
我目前正在学习 Nativescript 并想使用 Angular2 实现示例 Android 应用程序。
当我路由到一个组件,该组件将覆盖模板中带有自定义标题和导航按钮的默认可见起始页 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 and Sample Groceries,它似乎以类似的方式实现它。
要更改 Android 应用程序模板中的 ActionBar,必须采取哪些不同的措施?
更新
当我使用 代码并在功能模块中分离 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);
有!
您的配置似乎有效。虽然,<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);
我目前正在学习 Nativescript 并想使用 Angular2 实现示例 Android 应用程序。
当我路由到一个组件,该组件将覆盖模板中带有自定义标题和导航按钮的默认可见起始页 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 and Sample Groceries,它似乎以类似的方式实现它。
要更改 Android 应用程序模板中的 ActionBar,必须采取哪些不同的措施?
更新
当我使用
// 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);
有!
您的配置似乎有效。虽然,<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);