gpt4 book ai didi

javascript - Angular 2/Ionic Content 在 Headerbar 后面

转载 作者:行者123 更新时间:2023-11-30 11:37:15 24 4
gpt4 key购买 nike

我遇到了一个问题,我试图将标题栏提取到自己的组件中,但如果我使用这个新组件,页面的内容就会放在标题栏后面。

无需提取 header 并直接在 HTML 中使用相同的代码即可正常工作。

我的新组件:

header-bar.component.ts

import { Component, Input } from '@angular/core';

@Component({
selector: 'my-header-bar',
templateUrl: 'header-bar.html'
})

export class MyHeaderBar {

@Input() pageTitle : String;
constructor() {}
}

header-bar.html

<ion-header>
<ion-navbar>
<button ion-button menuToggle icon-only>
<ion-icon name="menu"></ion-icon>
</button>
<ion-title>{{pageTitle}}</ion-title>
</ion-navbar>
</ion-header>

我尝试使用的页面:

home.html

<my-header-bar  pageTitle="Einstellungen"> </my-header-bar>

<ion-content>
<h2>Welcome to Ionic!</h2>
<p>
This starter project comes with simple tabs-based layout for apps
that are going to primarily use a Tabbed UI.
</p>
...
</ion-content>

enter image description here

为什么它不适用于我自己的组件?

最佳答案

我正在使用以下代码,到目前为止还没有遇到任何问题。我尝试了以下;

<ion-navbar navbar>
<ion-title >{{title}}</ion-title>
</ion-navbar>

以下为ts文件代码:

@Component({
selector: 'navbar',
templateUrl: 'navbar.html'
})


export class CommonNavbar {
public title: string;

constructor(
private nav: NavController) {

}

setTitle(title: string){
this.title = title;
console.log(this.title);
}
}

并以下列方式使用它:

<ion-header>
<navbar></navbar>
</ion-header>

我还为通用导航栏添加了一些样式(例如将标题居中),并使用以下代码片段从组件/页面对其进行了配置。

import { CommonNavbar } from '../../components/shared_nav/navbar';

@ViewChild(forwardRef(() => CommonNavbar)) commonNavbar: CommonNavbar;

ngAfterViewInit() {
this.commonNavbar.setTitle(title);
this.commonNavbar.centerTitle(true);
}

关于javascript - Angular 2/Ionic Content 在 Headerbar 后面,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43948322/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com