Question

我正在学习离子，为此我正在关注ionic framework document。如链接中所述，要动态设置属性，请给出示例

<div [attr.text-center]="isMD ? '' : null">I will be centered when isMD is true.</div>。

但是当我尝试实施它时却没有用！既不在浏览器中也不在我的Android设备中。

<p [attr.text-center]="isMD ? '' : null"> paragraph in a center</p>

有谁知道为什么会这样？我哪里做错了？

修改

我的.ts文件

import { Component } from '@angular/core';

@Component({
  selector: 'page-hello-ionic',
  templateUrl: 'hello-ionic.html'
})
export class HelloIonicPage {
  constructor() {

  }
}

Answer 1

p标签保持不变。您需要在.ts文件中添加 isMD 变量

import { Platform } from 'ionic-angular';
import { Component } from '@angular/core';

@Component({
  selector: 'page-hello-ionic',
  templateUrl: 'hello-ionic.html'
})
export class HelloIonicPage {
  constructor(public plt: Platform) {
    if(this.plt.is('android')){
      isMD= true;
    }else{
      isMD= false;
    }

  }
}

如果没有此流程，您可以使用 ngClass

通过其他流程完成此操作 .scss 中的

代码

.center-text{
  text-align: center;
}

.ts 粘贴代码

import { Component } from '@angular/core';

@Component({
  selector: 'page-hello-ionic',
  templateUrl: 'hello-ionic.html'
})
export class HelloIonicPage {
  constructor() {
    isMD= true;
  }
}

.html 粘贴代码

<p [ngClass]="{'center-text': isMD}">paragraph in a center</p>

Answer 2

如果您默认希望文本显示为居中对齐，只需将此属性添加到您的p标记

即可

<p text-center>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac vehicula lorem.
</p>

如果你想要一个动态行为并根据某些条件你希望它显示为居中对齐，那么你必须在控制器中创建一个变量并更改值true / false，并根据你的文本显示中心对齐所以该

<p [attr.text-center]="yourVariable ? '' : null">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac vehicula lorem.
</p>

您的.ts文件

import { Component } from '@angular/core';

@Component({
  selector: 'page-hello-ionic',
  templateUrl: 'hello-ionic.html'
})
export class HelloIonicPage {
  yourVariable:boolean;
  constructor() {
      yourVariable = true; // control your text alignment from here
  }
}

希望它可以帮助你

段落没有显示在离子3的中心

2 个答案: