Question

我正在尝试创建一个自定义组件作为所有页面的标题。我使用CLI命令

生成它

ionic generate component BPNavbar

BP-navbar.html

<ion-header>
    <ion-navbar>
        <button ion-button ion-button menuToggle>
            <ion-icon name="menu"></ion-icon>
        </button>
        <ion-title text-left>LISTADO DE OFERTAS</ion-title>
        <ion-buttons end> 
            <button id="notification-button" ion-button clear (click)="openCart()">
                <ion-icon name="cart">
                    <ion-badge id="notifications-badge" color="danger">17</ion-badge>
                </ion-icon>              
            </button>        
        </ion-buttons>
    </ion-navbar>
</ion-header>

BP-navbar.ts

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

@Component({
    selector: 'bp-navbar',
    templateUrl: 'bp-navbar.html'
})
export class BpNavbarComponent {

    text: string;

    constructor() {
        console.log('Hello BpNavbarComponent Component');
        this.text = 'Hello World';
    }

}

components.module.ts

import { NgModule } from '@angular/core';
import { BpNavbarComponent } from './bp-navbar/bp-navbar';
@NgModule({
    declarations: [BpNavbarComponent],
    imports: [],
    exports: [BpNavbarComponent]
})
export class ComponentsModule {}

如果我添加标签

<bp-navbar></bp-navbar>

在一个html页面文件中我没有得到任何打印。我没有收到任何错误。

知道为什么没有渲染？

Answer 1

虽然我不知道它背后的细节，但这是由组件内的ion-header元素引起的。将其从组件中删除并将其放在页面上，它应该工作。然后，每个HTML页面将开始：

<ion-header>
  <bp-navbar></bpnavbar>
</ion-header>

角度组件未呈现

1 个答案: