Question

嗨，我是角色新手，这对于有更多经验的人来说似乎很明显，但我试图在点击按钮时向页面添加自定义html元素。我无法弄清楚如何。

我的html和ts文件

TS文件：

@Component({
  selector: 'app-conter',
  templateUrl: './conter.component.html',
  styleUrls: ['./conter.component.css']
})
export class ConterComponent extends HTMLElement {
   _ref;
   constructor(id: string) {
    super();
    this.draggable = true;
    this.setAttribute('(drag)', 'drag($event)');
    this.setAttribute('id', id);
   }
   @Input()
  counterValue = 0 ;
   drag(ev) {
     ev.dataTransfer.setData('text/html', this);
   }
   protected validation() {
   }
  increment() {
    this.counterValue++;
  }
  decrement() {
    this.counterValue--;
  }
  setCounter(value) {
    this.counterValue = value;
      }
    }

HTML：

<div id="cont">
<button (click)="increment()">+</button>
{{counterValue}}
<button (click)="decrement()">-</button>
</div>

我添加元素：

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent implements OnInit {
  constructor() {
  }
  ngOnInit() {}
  generate() {

                  <-- Method where i want to add my HTMELement to the page
  }

Answer 1

您可以通过以下示例

来完成

generate(){
 const template = document.createElement('template');
 document.getElementsByTagName('body')[0].appendChild(template);
}

但我认为你需要在模块外观here中添加CUSTOM_ELEMENTS_SCHEMA，如何在模块中添加它以避免错误。

在Typescript中添加自定义HTMLElement

1 个答案: