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

Question

我开始玩 Angular2 Beta。我想在我的应用程序中使用 Ace 编辑器，所以我稍微修改了 https://github.com/hardbyte/angular2-bt-components/blob/master/app/components/markdown/aceEditor.ts . As far as I can tell from debugging, the directive code correctly gets its reference to the Ace editor and no error is logged. Yet, the editor is always displayed with a minimal size (2x16 px), despite my attempts to resize it, from either code or CSS. You can find a repro here: 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。而且你不能调整内联元素的大小

方案一：(css)

#editor {
  display : block;
}

方案二：(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 编辑器指令：无法调整编辑器大小以使其可见

Angular2 beta Ace editor directive: unable to resize editor so that it's visible

ace-editor

angular