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