我可以用离子2定义离子导航棒外的离子 Headers （即离子含量）吗？

2 回答

• 1

  您可以创建 Input 变量 . 只需创建一个 Headers 页：

  HTML

  <!-- ngIf to prevent a 'flashing' title, remove and see for yourself if you don't understand -->
  <ion-header *ngIf="customTitle">
      <ion-navbar color="quintor">
          <button menuToggle ion-button>
              <ion-icon name="menu"></ion-icon>
          </button>
          <ion-title>{{customTitle}}</ion-title>
      </ion-navbar> 
  </ion-header>
  

  TS

  @Component({
    selector: 'header-page',
    templateUrl: 'header-page.html',
    inputs: ['title']
  })
  export class HeaderPage {
  
      //initialize if you remove the ngIf in html
      public customTitle: string; //= "";
  
      set title(value: string) {
         if(value) {
            this.customTitle = value;
         }
      }
  
      constructor() { }
  }
  

  然后将 HeaderPage 添加到 declarations 下的 @ngModule （和 entryComponents ，具体取决于版本）

  接下来，您可以在任何html文件中调用它（无需导入任何页面），如下所示：

  <header-page [title]="someVariable"></header-page>

  要不就

  <header-page title="This is my title"></header-page>

  （不完全确定 title 是否是一个保留的术语，如果是，只需将其更改为不是，例如 pageTitle . ）

  回复于 2024-04-20T06:02:36+08:00
• 2

  我想在一个单独的文件中定义ion-header部分，以便将其用于多个屏幕 .

  就像你在this answer中看到的那样， @mhartington （来自Ionic团队）说：

  无法创建全局离子导航栏，因为这是故意的 . 为每个组件定义导航栏的重点是，我们可以正确设置 Headers ，导航栏背景颜色（如果您更改它们）并为所需的其他属性设置动画 .

  关于创建自定义指令以避免重复ion-navbar html代码：

  这仍然会产生angular2内容投影如何工作的错误 . 当人们尝试这个时，我们有几个问题已经公开，最好的答案就是不做 .

  所以即使你想要完成的事情完全有意义，它可能会在以后引起一些问题，所以你应该避免这样做:(

  回复于 2024-04-20T06:02:36+08:00