Question

我开始玩Angular2 Beta。我想在我的应用程序中使用Ace编辑器，因此我稍微调整了https://github.com/hardbyte/angular2-bt-components/blob/master/app/components/markdown/aceEditor.ts代码作为指令的基础。据我所知，从调试开始，指令代码正确地获得了对Ace编辑器的引用，并且没有记录错误。然而，编辑器总是以最小尺寸（2x16像素）显示，尽管我试图从代码或CSS中调整它的大小。你可以在这里找到一个复制品：http://plnkr.co/edit/BYA4oTlyZHLtkqppViHH?p=preview。有人可以提出建议吗？

这是指令代码：

import {Component,Directive,EventEmitter,ElementRef} from 'angular2/core';

declare var ace: any;

@Directive({
    selector: 'ace-editor',
    inputs: [
        "text"
    ],
    outputs: [
        "textChanged"
    ]
})
export class AceDirective { 
    private editor;
    public textChanged: EventEmitter<string>;

    set text(s: string) {
        this.editor.setValue(s);
        this.editor.clearSelection();
        this.editor.focus();
    }

    constructor(elementRef: ElementRef) {
        this.textChanged = new EventEmitter<string>();

        let el = elementRef.nativeElement;
        el.classList.add("editor");
        el.style.height = "250px";
        el.style.width = "300px";
        this.editor = ace.edit(el);
        this.editor.resize(true);
        //this.editor.setTheme("ace/theme/monokai");
        //this.editor.getSession().setMode("ace/mode/xml");

        this.editor.on("change", (e) => {
            this.textChanged.next(this.editor.getValue());
        });
    }
}

以下是带有模板的应用代码：

import {Component} from 'angular2/core';
import {AceDirective} from "./ace.directive";

@Component({
  selector: 'my-app',
  providers: [],
  template: `
    <div>
      <h2>Hello {{name}}</h2>
      <div style="width:400px;height:300px;background-color:#f0f0f0">
        <ace-editor id="editor"></ace-editor>
      </div>
    </div>
  `,
  directives: [AceDirective]
})
export class App {
  constructor() {
    this.name = 'Angular2';
  }
}

Answer 1

您需要赋予#editor display:block样式。或者将其放在div中并使用属性选择器。自定义元素呈现为display:inline。并且您无法调整内联元素的大小

解决方案1：（css）

#editor {
  display : block;
}

解决方案2：（attr）

（驼峰案例属性指令现在是angular2中的标准）

app.ts：

@Component({
  selector: 'my-app',
  providers: [],
  template: `
    <div>
      <h2>Hello {{name}}</h2>
      <div style="width:400px;height:300px;background-color:#f0f0f0">
        <div aceEditor id="editor"></div>
      </div>
    </div>
  `,
  directives: [AceDirective]
})

ace.directive.ts：

@Directive({
    selector: '[aceEditor]',
    inputs: [
        "text"
    ],
    outputs: [
        "textChanged"
    ]
})

Angular2 beta Ace编辑器指令：无法调整编辑器的大小以使其可见

1 个答案: