Question

为了拥有一个干净，干爽的离子项目，我只想将导航栏代码写在一个地方，而不是在每个Ionic页面上写整个HTML。

为此，我创建了一个名为navbar的Angular组件（不是离子页面），并将其注入到页面中。为了保持DOM中没有其他内容的干净布局，我创建了一个带有方括号符号的组件，如下所示：

@Component({
  // brackets let the selector be used as a property instead of a component
  selector: '[navbar]',
  templateUrl: 'navbar.html',
})
export class NavbarComponent {

  @Input() title: string = 'default title';
  constructor() {}

}

然后我尝试将组件插入到这样的页面中：

<ng-container navbar title="My good title"></ng-container>

目的是不在DOM中创建任何其他节点以保持布局整洁。但是，这不起作用，因为我得到一个空白页面，控制台中没有特定错误。

作为比较，

<div navbar title="My good title"></div>

有效，但我的布局已损坏（离子内容从页面的顶部开始，被导航栏隐藏了）

有什么主意吗？谢谢。

// navbar.html代码

<ion-header>
  <ion-navbar>
    <button ion-button menuToggle>
      <ion-icon name="ios-menu"></ion-icon>
    </button>

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

    <ion-buttons margin-horizontal end>
      <img class="logo-navbar" src="../../assets/imgs/logo-hudi-noir-noborder.png">
    </ion-buttons>
  </ion-navbar>
</ion-header>

离子（离子CLI）：4.1.2 离子框架：离子角3.9.2 @ ionic / app-scripts：3.1.9

Answer 1

您可以将navbar属性应用于ion-header元素：

<ion-header navbar title="My good title"></ion-header>

并将NavbarComponent定义为该元素的内容：

<ion-navbar>
  <button ion-button menuToggle>
    <ion-icon name="ios-menu"></ion-icon>
  </button>
  <ion-title>{{title}}</ion-title>
  <ion-buttons margin-horizontal end>
    <img class="logo-navbar" src="../../assets/imgs/logo-hudi-noir-noborder.png">
  </ion-buttons>
</ion-navbar>

有关演示，请参见this stackblitz。

ng-container => Ionic中的空白页错误

1 个答案: