Angular 的 Firepad
Firepad with Angular
我想在我的 angular 应用程序中使用 firepad。
我没有看到任何带有 angular 5 的 firepad 示例。
我不确定如何将 .ts 绑定到 html。
使用 .html 和 .ts 文件的示例会有很大帮助。
谢谢
比利
回答我自己的问题:
打字稿
import { Component, OnInit, ViewChild } from '@angular/core';
import { AceEditorComponent } from 'ng2-ace-editor';
import * as Firepad from 'firepad';
import * as firebase from 'firebase';
@Component({
selector: 'app-request-access',
templateUrl: './request-access.component.html',
styleUrls: ['./request-access.component.css']
})
export class RequestAccessComponent implements OnInit {
@ViewChild('firepad') firepadEle: AceEditorComponent;
constructor() { }
ngOnInit() {
let editor = this.firepadEle.getEditor();
let firepad = Firepad.fromACE(firebase.database().ref(), editor);
}
}
HTML
<ace-editor
#firepad
mode="java"
theme="eclipse"
[options]="options"
[readOnly]="false"
[autoUpdateContent]="true"
class="ace-editor"
style="height:150px;">
</ace-editor>
我们只需要在 html 中使用 AceEditorComponent 并在打字稿中使用它。
我想在我的 angular 应用程序中使用 firepad。
我没有看到任何带有 angular 5 的 firepad 示例。
我不确定如何将 .ts 绑定到 html。 使用 .html 和 .ts 文件的示例会有很大帮助。
谢谢 比利
回答我自己的问题:
打字稿
import { Component, OnInit, ViewChild } from '@angular/core';
import { AceEditorComponent } from 'ng2-ace-editor';
import * as Firepad from 'firepad';
import * as firebase from 'firebase';
@Component({
selector: 'app-request-access',
templateUrl: './request-access.component.html',
styleUrls: ['./request-access.component.css']
})
export class RequestAccessComponent implements OnInit {
@ViewChild('firepad') firepadEle: AceEditorComponent;
constructor() { }
ngOnInit() {
let editor = this.firepadEle.getEditor();
let firepad = Firepad.fromACE(firebase.database().ref(), editor);
}
}
HTML
<ace-editor
#firepad
mode="java"
theme="eclipse"
[options]="options"
[readOnly]="false"
[autoUpdateContent]="true"
class="ace-editor"
style="height:150px;">
</ace-editor>
我们只需要在 html 中使用 AceEditorComponent 并在打字稿中使用它。