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

Question

为了有一个干净和干燥的 ionic 项目，我只想将我的导航栏代码写在一个地方，而不是在每个 Ionic 页面中编写整个 HTML。

为此，我创建了一个名为 navbar 的 Angular 组件（不是 Ionic 页面），并将其注入到我的页面中。为了保持 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 以获取演示。