时间戳

首页 > 解决方案 > 角度组件未渲染

angular - 角度组件未渲染

问题描述

我正在尝试创建一个自定义组件作为所有页面的标题。我使用 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';
    }

}

组件.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 页面文件中，我没有打印任何内容。我没有收到任何错误。

知道为什么不被渲染吗？

标签： angularionic-frameworkionic3

解决方案

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

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

推荐阅读