Question

我在点击登录按钮后尝试插入一段html代码（ion-header-bar）。我需要在所有模块之上添加此代码。由于它是所有模块中的同一段代码，无论如何都要通过将其写在一个地方来实现它，而不是将重复的代码添加到所有模块中。

Answer 1

编辑我意识到这个问题没有说明使用哪种版本的离子。 此答案仅仅对离子2和离子3 （以及可能更晚的版本）工作<离子1将以不同方式工作

如果您遵循Ionic 2或3项目的典型结构（App.component使用<ion-nav>），您只需将<ion-header-bar>放在<ion-nav>旁边*ngIf：

/// src/app/app.html <ion-header-bar *ngIf="isUserLoggedIn()">This only shows when is UserLoggedIn() returns true</ion-header-bar> <ion-nav [root]="rootPage"></ion-nav>

在app.component.ts内，你只需实现*ngIf
使用的功能
/// src/app/app.component.ts @Component({ templateUrl: 'app.html' }) export class MyApp { public rootPage: any = MenuPage; public isUserLoggedIn(): boolean { // TODO: Implement this to return true when the user is logged in } }

有很多方法可以做到这一点 - 但考虑到您提供的信息有限，这是我现在能想到的最简单的方法。

Answer 2

我为此创建了一个codepen： https://codepen.io/anon/pen/aEYBmL

在HTML中添加ng-if到标题栏，并为其提供一个在用户登录时返回true的函数：

<html>
(...)
  <body ng-controller="MyCtrl">

    <ion-header-bar class="bar-positive" ng-if="isUserLoggedIn()">
      <h1 class="title">this only shows if isUserLoggedIn() returns true</h1>
    </ion-header-bar>

    <ion-content>
      <h1 style="margin-top: 56px">Here is your other content!</h1>
    </ion-content>

  </body>
</html>

然后将该函数或变量附加到控制器内的范围：

angular.module('ionicApp', ['ionic'])

.controller('MyCtrl', function($scope) {

  $scope.isUserLoggedIn = () => {
    // TODO Implement this
    return true;
  }
});

阅读ng-if here： https://docs.angularjs.org/api/ng/directive/ngIf

编辑：在每个屏幕上显示一个组件：

看看这个codepen： https://codepen.io/calendee/pen/ubzDq

在这里，ion-nav-navbar（ion-header-bar与ion-nav-bar相同，带有后退按钮和标题）在///This wont be replaced as its not inside the ion-nav-view. So its displayed on every screen. <ion-nav-bar> <ion-nav-back-button> </ion-nav-back-button> </ion-nav-bar> <ion-nav-view> /// Everything in here will be replaced by your current navstack </ion-nav-view>之外，这使得它始终显示 - 无需将其放在任何地方

holder.colorImage.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View view) {

            holder.colorImage.setBackgroundResource(0);

            for (int i = 0; i < colorId.size(); i++) {

                holder.colorImage.setBackgroundResource(R.drawable.image_border);
            }
        }

    });

如何在呈现页面后插入html代码

2 个答案: