时间戳

首页 > 解决方案 > 为什么 Angular 组件选择器可以包含在 html 中？

javascript - 为什么 Angular 组件选择器可以包含在 html 中？

问题描述

我是 Angular 和 html/html5 的新手，如果我的问题听起来很愚蠢，我很抱歉。下面是截图：

在此处输入图像描述

我的问题是：

Q1-paproductform是ng组件选择器的名字，不是有效的html标签，怎么还能包含在html中？客户端浏览器是如何解释那些无效标签的？

Q2-您可以看到有很多与ng相关的属性，例如_nghost-c0，html中的自定义属性不是必须是data-xxx（data-_nghost-c0）才有效吗？

标签： javascripthtmlangular

解决方案

根据角度文档：

Angular 元素是封装为自定义元素（也称为 Web 组件）的 Angular 组件，这是一种以与框架无关的方式定义新 HTML 元素的 Web 标准。

自定义元素是当前受 Chrome、Firefox、Opera 和 Safari 支持的 Web 平台功能，可通过 polyfill 在其他浏览器中使用（请参阅浏览器支持）。自定义元素通过允许您定义其内容由 JavaScript 代码创建和控制的标签来扩展 HTML。浏览器维护已定义自定义元素的CustomElementRegistry ，它将可实例化的 JavaScript 类映射到 HTML 标记。


A1 - 使用CustomElementRegistry创建自定义 HTML 元素。

创建类后使用该CustomElementRegistry.define()方法定义自定义元素：

class WordCount extends HTMLParagraphElement {
  constructor() {

    super(); 

    var wcParent = this.parentNode;   // count words in element's parent element

    function countWords(node){
      var text = node.innerText || node.textContent
      return text.split(/\s+/g).length;
    }

    var count = 'Words: ' + countWords(wcParent);

    var shadow = this.attachShadow({mode: 'open'});  // Create a shadow root

    // Create text node and add word count to it
    var text = document.createElement('span');
    text.textContent = count;

    shadow.appendChild(text);  // Append it to the shadow root

    setInterval(function() {  // Update count when element content changes
      var count = 'Words: ' + countWords(wcParent);
      text.textContent = count;
    }, 200)

  }
}

// Define the new element
customElements.define('word-count', WordCount, { extends: 'p' });



A2 - 使用Element.setAttribute()创建自定义属性。

在以下示例中，setAttribute()用于设置<button>.

HTML

<button>Hello World</button>

JavaScript

var b = document.querySelector("button"); 

b.setAttribute("name", "helloButton");
b.setAttribute("disabled", "");

推荐阅读