今天遇到一个需要类似右击然后创建一个菜单的时候,陷入了误区,为什么要自己操控dom呢?angular明明优势就是数据操控视图,直接在页面的定义好对应的组件(不显示),直接通过数据控制不就行了吗?

window.document.createElement()

这个基本大家都使用过
虽然在angular中也能使用,不过因为逻辑上Angular以组件为单位划分,这其实是很不合理的,所以官方提供个封装好的方法给我们使用

let demo = this.renderer2.createElement('a');
this.renderer2.appendChild(this.el.nativeElement, demo);

这里的el.nativeElement替代当前控制器所操控的实际DOM结构 请看下文

//这里可以理解为当前组件ts 逻辑上的body部分

import { Component, OnInit, AfterViewInit, ViewChild, ElementRef, Renderer2, OnDestroy  } from '@angular/core';

constructor(
    private renderer2: Renderer2,
    private el: ElementRef,
  ) { }

然后就是控制属性的code:

this.renderer2.setAttribute(demo, 'download', this.pdfName);

移除DOM:

this.renderer2.removeChild(this.el.nativeElement, tempLink);

聊点别的

从过年前的的不到一万,现在已经6w了。

2020计划: => <p style="color:red">活着</p>

Last modification:April 15, 2020
如果觉得文章对你有所收获,可以请笔者喝杯咖啡