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

时间:2018-01-10 07:04:47

标签: ionic-framework

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

2 个答案:

答案 0 :(得分:0)

编辑我意识到这个问题没有说明使用哪种版本的离子。 此答案对离子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
  }

}

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

答案 1 :(得分:0)

我为此创建了一个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-navbarion-header-barion-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);
            }
        }

    });