1
我想用TypeScript創建一個Angular組件。我試圖創建我的組件使用document.createElement創建一個工具欄，但它沒有被生成。如何使用Angular創建TypeScript組件？
這裏是我的組件代碼：
import {Directive, Component, bootstrap} from 'angular2/angular2';
import {ToolbarGroup} from './toolbar';
@Component({
selector: 'option-menu',
templateUrl: 'templates/options.html'
})
class OptionMenu {
ToolbarGroup = new ToolbarGroup;
constructor() {
}
/**
* @argument Node for return this count of child
* @returns count of child in a node
*/
public getChildCount(node) {
var number = node.childNodes.length;
return number;
}
public createCols(colNumber, rowName, className) {
for (var i = 0; i < colNumber; i++) {
var col = document.createElement("DIV");
var rowID = rowName.getAttribute('id');
rowID += 'col' + i;
col.setAttribute('id', rowID);
console.log(col.getAttribute('id'));
col.setAttribute("class", className);
var textnode = document.createElement("DIV");
var pading = document.createElement("br");
var toobar = document.createElement("toolbar");
//col.appendChild(this.createCloseButton(col));
col.appendChild(toobar);
col.appendChild(pading);
textnode.setAttribute('id', 'insideCol' + col.getAttribute('id'));
textnode.setAttribute('class', 'insideColConttent');
textnode.setAttribute("ondrop", "drop2(event,insideCol" + col.getAttribute('id') + ")");
textnode.setAttribute("ondragover", "allowDrop(event)");
col.appendChild(textnode);
rowName.appendChild(col);
}
return rowName;
}
public createRows(colNumber, selectorName) {
var row = document.createElement("DIV");
row.setAttribute("class", "row");
if (colNumber == 1) {
var rowlID = 'rowL1Child' + this.getChildCount(selectorName);
row.setAttribute("id", rowlID);
row = this.createCols(1, row, 'col-md-12 coluna-editor');
} else if (colNumber == 2) {
var rowlID = 'rowL2Child' + this.getChildCount(selectorName);
row.setAttribute("id", rowlID);
row = this.createCols(2, row, 'col-md-6 coluna-editor');
} else if (colNumber == 3) {
var rowlID = 'rowL3Child' + this.getChildCount(selectorName);
row.setAttribute("id", rowlID);
row = this.createCols(3, row, 'col-md-4 coluna-editor');
} else if (colNumber == 4) {
var rowlID = 'rowL4Child' + this.getChildCount(selectorName);
row.setAttribute("id", rowlID);
row = this.createCols(4, row, 'col-md-3 coluna-editor');
}
return row;
}
createOneLineOneColumn() {
var el = document.getElementById('content-into-page');
el.appendChild(this.createRows(1, el));
}
createOneLineTowColumn() {
var el = document.getElementById('content-into-page');
el.appendChild(this.createRows(2, el));
}
createOneLineThreeColumn() {
var el = document.getElementById('content-into-page');
el.appendChild(this.createRows(3, el));
}
createOneLineFourColumn() {
var el = document.getElementById('content-into-page');
el.appendChild(this.createRows(4, el));
}
public createCloseButton(colID) {
var btn = document.createElement("A");
btn.setAttribute('href', 'javascript:void(0)');
btn.setAttribute('class', 'btn btn-flat btn-default mdi-navigation-close');
btn.setAttribute('onclick', 'cleanCol(' + colID.getAttribute('id') + ')');
return btn;
}
public removeRow(rowId) {
var btn = document.createElement("A");
btn.setAttribute('href', 'javascript:void(0)');
btn.setAttribute('class', 'btn btn-flat btn-default mdi-navigation-close');
btn.setAttribute('onclick', 'removeRow(' + rowId.getAttribute('id') + ')');
return btn;
}
saveContent() {
var content = document.getElementById('content-into-page');
var json = this.mapDOM(content, true);
//console.log(json);
//print();
JSON.stringify(json)
console.log(json);
}
public mapDOM(element, json) {
var treeObject = {};
//Recursively loop through DOM elements and assign properties to object
function treeHTML(element, object) {
object["type"] = element.nodeName;
var nodeList = element.childNodes;
if (nodeList != null) {
if (nodeList.length) {
object["content"] = [];
for (var i = 0; i < nodeList.length; i++) {
if (nodeList[i].nodeType == 3) {
object["content"].push(nodeList[i].nodeValue);
} else {
object["content"].push({});
treeHTML(nodeList[i], object["content"][object["content"].length -1]);
}
}
}
}
if (element.attributes != null) {
if (element.attributes.length) {
object["attributes"] = {};
for (var i = 0; i < element.attributes.length; i++) {
object["attributes"][element.attributes[i].nodeName] = element.attributes[i].nodeValue;
}
}
}
}
treeHTML(element, treeObject);
return (json) ? JSON.stringify(treeObject) : treeObject;
}
}
bootstrap(OptionMenu,[ToolbarGroup]);
和組件我想創造：
import {Inject, Injectable, Directive, View, Component, bootstrap} from 'angular2/angular2';
@Component({
selector: 'toolbar',
templateUrl: 'templates/toolbar.html'
})
export class ToolbarGroup {
}
bootstrap(ToolbarGroup);