Question

如何以角度

调整输入文本的宽度

我有一个来自另一个库的输入文本组件，名为'njm-input' 在我的应用程序中，我想使用它并调整其宽度。首先，我把它放在我的flexbox div中，div的宽度是该行的20％然后，我想将'njm-input'的宽度设置为'100px'。我所做的并没有奏效。 The online sample is here

的src / app.ts

import {Component, NgModule, VERSION} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'
import {NmjInputComponent} from './component/nmj-input'
@Component({
  selector: 'my-app',
  template: `
    <div>
      <h2>Hello {{name}}</h2>
      <div class="grid">
        <div class="grid-cell u-1of10">
          <label>name:</label>
        </div>
        <div class="grid-cell u-1of2">
          <nmj-input></nmj-input>
        </div>
      </div>
    </div>
  `,
  styles: [`
    .grid {
      display: flex;
    }
    .grid-cell {
      flex: 1;
    }
    .grid-cell.u-1of10 {
      flex: 0 0 10%;
      text-align: right;
      background-color: red;
    }
    .grid-cell.u-1of2 {
      flex: 0 0 20%;
      border: 1px red solid;
    }

    .nmj-input {
      width: 100px;
    }
  `],
})
export class App {
  name:string;
  constructor() {
    this.name = `Angular! v${VERSION.full}`
  }
}

@NgModule({
  imports: [ BrowserModule ],
  declarations: [ App, NmjInputComponent ],
  bootstrap: [ App ]
})
export class AppModule {}

的src /组件/ NMJ-input.ts

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

@Component({
  selector: 'nmj-input',
  template: `
  <input type="text" class='form-control'>
  `,
  styles: [`
    :host { width: 100%; }
    .form-control { width: 100%; }
  `],
})
export class NmjInputComponent {
}

Answer 1

利用ViewEncapsulation

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

@Component({
  selector: 'nmj-input',
  template: `
  <input type="text" class='form-control'>
  `,
  styles: [`
    :host { width: 100%; }
    .form-control { width: 100%; }
  `],
  encapsulation: ViewEncapsulation.None // added to component
})
export class NmjInputComponent {

}

在父组件中

将此添加到css

:host /deep/ .form-control{
  background: darkkhaki;
  width:100px;
}

工作Plunker

你可以在这里得到一个有效的例子和更多解释 Link

如何以角度调整输入文本的宽度

1 个答案: