Angular 自定义组件

我已经按照formio文档创建了自定义组件，但我只是一个初学者，所以无法让它工作。我想创建自定义组件来实现这个页面

---

我想创建自定义组件，如添加新卡，您可以选择该卡的子项，如视频，或图像，输入等。基本上我想实现谷歌forms builder我发现formio是form builder的最佳选择，但我被这个自定义组件卡住了。我听说有人终于在stackoverflow中创建了自定义组件，我也问了他们的问题。有人能帮我吗？也许你有我要遵循的源代码，或者其他什么，真的很感谢你的帮助

我已经成功地做了一段时间了

首先，在Formio中找到一个现有的组件，该组件的功能与您想要的接近。如果新元素只是呈现一些非交互式的内容，那么就可以使用“HTML”组件

这是您需要的代码：

var htmlComponent = Formio.Components.components.htmlelement; // or whatever
class MyNewComponent extends htmlComponent{

  static schema(...extend) {
    return super.schema({
          type: 'MyNewComponent',
          label: "The Default Label",
          any_other_fields: "",
    }, ...extend);

    static get builderInfo() {
      return {
        title: 'Name in the Builder',
        group: 'custom',
        icon: 'picture-o',
        weight: 5,
        schema: this.schema()
      };
    }

    render(element) {
      // Here's where you add your HTML to get put up.
      // 
      tpl += "<div ref='myref'>Hi there!</div>";
      // Note the use of the 'ref' tag, which is used later to find 
      // parts of your rendered element.
      
      // If you need to render the superclass,
      // you can do that with 
      // tpl+=super.render(element);

      // This wraps your template to give it the standard label and bulider decorations         
      return Formio.Components.components.component.prototype.render.call(this,tpl);

    }
    
    attach(element) {
      // This code is called after rendering, when the DOM has been created.
      // You can find your elements above like this:
      this.loadRefs(element, {myref: 'single'});

      var superattach = super.attach(element);
       // Here do whatever you need to attach event handlers to the dom.
      this.refs.myref.on('click',()=>{alert("hi!");});                    

      return superattach;
    }
    
    getvalue() {
      return 3; // the value this element puts into the form
    }
    // OR, depending on which component type you're basing on:
    getValueAt(index,value,flags) {}

    setValue(value) {
      // modify your DOM here to reflect that the value should be 'value'.
    };
    // OR, depending on what component type:
    getValueAt(index) {}

  }
  
  // This sets the form that pops up in the Builder when you create
  // one of these.  It is basically just a standard form, and you
  // can look at the contents of this in the debugger.
  MyNewComponent.editForm = htmlComponent.editForm;


  // Register your component to Formio
  Formio.Components.addComponent('MyNewComponent', MyNewComponent);

var htmlComponent=Formio.Components.Components.htmlelement；//或者别的什么
类MyNewComponent扩展了htmlComponent{
静态模式（…扩展）{
返回super.schema({
类型：“MyNewComponent”，
标签：“默认标签”，
任何其他字段：“”，
}，…延长）；
静态get builderInfo（）{
返回{
标题：“生成器中的名称”，
组：“自定义”，
图标：“picture-o”，
体重：5，
schema:this.schema（）
};
}
渲染（元素）{
//这里是添加HTML的地方。
// 
tpl+=“你好！”；
//请注意“ref”标记的使用，该标记稍后用于查找
//渲染元素的一部分。
//如果需要渲染超类，
//你可以用它来做
//tpl+=超级渲染（元素）；
//这将包装模板，为其提供标准标签和布利德尔装饰
返回Formio.Components.Components.component.prototype.render.call（this，tpl）；
}
附加（元素）{
//在创建DOM后，在渲染后调用此代码。
//您可以在上面找到如下元素：
loadRefs（元素，{myref:'single'}）；
var superattach=super.attach（元素）；
//在这里，您可以执行将事件处理程序附加到dom所需的任何操作。
this.refs.myref.on（'click'，（）=>{alert（“hi！”；}）；
返回超附着；
}
getvalue（）{
return 3；//此元素放入表单中的值
}
//或者，根据您所基于的组件类型：
getValueAt（索引、值、标志）{}
设置值（值）{
//在此处修改DOM以反映值应为“value”。
};
//或者，取决于组件类型：
getValueAt（索引）{}
}
//这将设置创建时在生成器中弹出的表单
//其中一个。它基本上只是一个标准形式，而你
//可以在调试器中查看此文件的内容。
MyNewComponent.editForm=htmlComponent.editForm；
//将组件注册到Formio
Formio.Components.addComponent（'MyNewComponent'，MyNewComponent'）；

---

这是来之不易的知识，希望它能帮助其他人。

我已经成功地做了一段时间了

首先，在Formio中找到一个现有的组件，该组件的功能与您想要的非常接近。如果您的新元素只是呈现一些非交互式的内容，那么您可以使用一个“HTML”组件

这是您需要的代码：

var htmlComponent = Formio.Components.components.htmlelement; // or whatever
class MyNewComponent extends htmlComponent{

  static schema(...extend) {
    return super.schema({
          type: 'MyNewComponent',
          label: "The Default Label",
          any_other_fields: "",
    }, ...extend);

    static get builderInfo() {
      return {
        title: 'Name in the Builder',
        group: 'custom',
        icon: 'picture-o',
        weight: 5,
        schema: this.schema()
      };
    }

    render(element) {
      // Here's where you add your HTML to get put up.
      // 
      tpl += "<div ref='myref'>Hi there!</div>";
      // Note the use of the 'ref' tag, which is used later to find 
      // parts of your rendered element.
      
      // If you need to render the superclass,
      // you can do that with 
      // tpl+=super.render(element);

      // This wraps your template to give it the standard label and bulider decorations         
      return Formio.Components.components.component.prototype.render.call(this,tpl);

    }
    
    attach(element) {
      // This code is called after rendering, when the DOM has been created.
      // You can find your elements above like this:
      this.loadRefs(element, {myref: 'single'});

      var superattach = super.attach(element);
       // Here do whatever you need to attach event handlers to the dom.
      this.refs.myref.on('click',()=>{alert("hi!");});                    

      return superattach;
    }
    
    getvalue() {
      return 3; // the value this element puts into the form
    }
    // OR, depending on which component type you're basing on:
    getValueAt(index,value,flags) {}

    setValue(value) {
      // modify your DOM here to reflect that the value should be 'value'.
    };
    // OR, depending on what component type:
    getValueAt(index) {}

  }
  
  // This sets the form that pops up in the Builder when you create
  // one of these.  It is basically just a standard form, and you
  // can look at the contents of this in the debugger.
  MyNewComponent.editForm = htmlComponent.editForm;


  // Register your component to Formio
  Formio.Components.addComponent('MyNewComponent', MyNewComponent);

var htmlComponent=Formio.Components.Components.htmlelement；//或其他
类MyNewComponent扩展了htmlComponent{
静态模式（…扩展）{
返回super.schema({
类型：“MyNewComponent”，
标签：“默认标签”，
任何其他字段：“”，
}，…延长）；
静态get builderInfo（）{
返回{
标题：“生成器中的名称”，
组：“自定义”，
图标：“picture-o”，
体重：5，
schema:this.schema（）
};
}
渲染（元素）{
//这里是添加HTML的地方。
// 
tpl+=“你好！”；
//请注意“ref”标记的使用，该标记稍后用于查找
//渲染元素的一部分。
//如果需要渲染超类，
//你可以用它来做
//tpl+=超级渲染（元素）；
//这将包装模板，为其提供标准标签和布利德尔装饰
返回Formio.Components.Components.component.prototype.render.call（this，tpl）；
}
附加（元素）{
//在创建DOM后，在渲染后调用此代码。
//您可以在上面找到如下元素：
loadRefs（元素，{myref:'single'}）；
var superattach=super.attach（元素）；
//在这里，您可以执行将事件处理程序附加到dom所需的任何操作。
this.refs.myref.on（'click'，（）=>{alert（“hi！”；}）；
返回超附着；
}
getvalue（）{
return 3；//此元素放入表单中的值
}
//或者，根据您所基于的组件类型：
getValueAt（索引、值、标志）{}
设置值（值）{
//在此处修改DOM以反映值应为“value”。
};
//或者，取决于组件类型：
getValueAt（索引）{}
}
//这将设置创建时在生成器中弹出的表单
//其中一个。它基本上只是一个标准形式，而你
//可以在调试器中查看此文件的内容。
MyNewComponent.editForm=htmlComponent.editForm；
//将组件注册到Formio
Formio.Components.addComponent（'MyNewComponent'，MyNewComponent'）；

---

这是来之不易的知识；希望它能帮助其他人。

到目前为止你做了什么？我已经基于此创建了一个组件，但总是给我一个错误。我也读了一份文档，但我不明白，因为我的知识还没有做到这一点