Question

我正在使用boostrap和angular 4.我创建了一个寄存器组件，我想在其他地方重用它的html。 HTML代码

<div class="col-md-4 col-sm-6 col-md-offset-4 col-sm-offset-3">
    <div class="card">
      <div class="card-header text-center" data-background-color="purple">
        <br>
        <h4 class="title">Registrate</h4>
        <br>
      </div>
      <p class="category text-center">Unete a nosotros</p>
      <div class="card-content">
        <div class="input-group">
          <span class="input-group-addon">
          <i class="material-icons">face</i>
        </span>
          <div class="form-group label-floating">
            <label class="control-label">nombre</label>
            <input type="text" class="form-control">
            <span class="material-input"></span>
          </div>
        </div>
        <div class="input-group">
          <span class="input-group-addon">
          <i class="material-icons">email</i>
        </span>
          <div class="form-group label-floating">
            <label class="control-label">correo</label>
            <input type="email" class="form-control">
            <span class="material-input"></span>
          </div>
        </div>
        <div class="input-group">
          <span class="input-group-addon">
          <i class="material-icons">lock_outline</i>
        </span>
          <div class="form-group label-floating">
            <label class="control-label">contraseña</label>
            <input type="password" class="form-control">
            <span class="material-input"></span>
          </div>
        </div>
        <div class="footer text-center">
          <button type="submit" class="btn btn-rose btn-simple btn-wd btn-lg">
          OK
          <div class="ripple-container"></div>
        </button>
        </div>
      </div>
    </div>
  </div>

在其他视图中，我想设置他的类属性col-md-4 col-sm-6 col-md-offset-4 col-sm-offset-3。它会更有活力吗？

Answer 1

使用角度2的ngClass属性，如下所示设置动态类：

<some-element [ngClass]="{'first': true, 'second': true, 'third': false}">...</some-element>

修改模板，如

注册组件模板 ...

在您的注册组件选择器中，例如。 register-comp

@Input() public page: string;

getClassByPageType(): string {
if(this.page === 'page1'){
 return 'col-md-4 col-sm-6 col-md-offset-4 col-sm-offset-3';
} else if(this.page === 'page2') {
 return 'col-md-2 col-sm-5 col-md-offset-6 col-sm-offset-4';
}
return 'col-md-4 col-sm-6 col-md-offset-4 col-sm-offset-3'; // default
}

在任何其他组件模板中，将您的页面发送到注册组件，如下所示

<div class='page1-comp'>
<register-comp page='page1'></register-comp>
</div>

<div class='page2-comp'>
    <register-comp page='page2'></register-comp>
</div>

如何使用Bootstrap网格执行动态布局模板？

1 个答案: