Angular Elements

Angular Elements 就是打包成自定义元素的 Angular 组件。所谓自定义元素就是一套与具体框架无关的用于定义新 HTML 元素的 Web 标准。

自定义元素这项特性目前受到了 Chrome、Opera 和 Safari 的支持,在其它浏览器中也能通过腻子脚本(参见浏览器支持)加以支持。 自定义元素扩展了 HTML,它允许你定义一个由 JavaScript 代码创建和控制的标签。

@angular/elements 包导出了一个 createCustomElement() API,它在 Angular 组件接口与变更检测功能和内置 DOM API 之间建立了一个桥梁。

使用自定义元素

自定义元素会自举启动 —— 它们在添加到 DOM 中时就会自行启动自己,并在从 DOM 中移除时自行销毁自己。

Angular 提供了 createCustomElement() 函数,以支持把 Angular 组件及其依赖转换成自定义元素。该函数会收集该组件的 Observable 型属性,提供浏览器创建和销毁实例时所需的 Angular 功能,还会对变更进行检测并做出响应。 注册完这个配置好的类之后,你就可以在内容中像内置 HTML 元素一样使用这个新元素了,比如直接把它加到 DOM 中:

<my-popup message="Use Angular!"></my-popup>

示例

一个简单的示例:

首先 定义angular element

import { BrowserModule } from '@angular/platform-browser';
import { NgModule, Injector } from '@angular/core';
import { createCustomElement } from '@angular/elements'; import { HelloComponent } from './hello.component'; @NgModule({
declarations: [AppComponent],
imports: [BrowserModule],
providers: [],
entryComponents: [HelloComponent]
})
export class AppModule {
constructor(injector: Injector) {
const el = createCustomElement(HelloComponent, { injector });
customElements.define('el-hello', el);
} ngDoBootstrap() {}
}

获得自定义元素后,我们使用该define 方法将其添加到自定义元素注册表中。然后我们可以在页面上包含应用程序,并通过将该元素添加到DOM来实例化该元素:

<el-hello></el-hello>

Angular Elements的更多相关文章

  1. [Angular] Use Angular components in AngularJS applications with Angular Elements

    When migrating AngularJS (v1.x) applications to Angular you have different options. Using Angular El ...

  2. [Angular] Use ngx-build-plus to compile Angular Elements

    We can treat Angular Element as each standlone lib and compile each Angular element spreatly. Tool w ...

  3. [Angular] Angular Elements Intro

    Make sure install the latest Angular v6 with Angular CLI. Checkout ght Github for the code. 1. Creat ...

  4. [Angular 8] Take away: Web Components with Angular Elements: Beyond the Basics

    This post is based on the NG-CONF talk, check the talk by yourself. 1. Dynamiclly add Angular Elemen ...

  5. [Angular] Communicate with Angular Elements using Inputs and Events

    In a real world scenario we obviously need to be able to communicate with an Angular Element embedde ...

  6. Angular v6 正式发布

    Angular 6 正式发布 Angular 6 已经正式发布了!这个主要版本并不关注于底层的框架,更多地关注于工具链,以及使 Angular 在未来更容易快速推进. 作为发布的一部分,我们同步了主要 ...

  7. Angular 7 版本

    Angular 7 版本 这是跨整个平台的主要版本,更新包括核心框架,Angular Material和CLI. 如何更新到v7 可以访问update.angular.io以获取有关更新应用程序的详细 ...

  8. angular custom Element 自定义web component

    angular 自定义web组件: 首先创建一个名为myCustom的组件. 引入app.module: ... import {customComponent} from ' ./myCustom. ...

  9. Angular6.0发布

    Angular v6 新版本重点关注工具链以及工具链在 Angular 中的运行速度问题. Angular v6 是统一整体框架.Material 和 CLI 三大 Angular 组件的第一个版本, ...

随机推荐

  1. 【深入理解JAVA虚拟机】读后感

    收获颇多的一本书,非常值得细细品味. 1.所谓万变不离其宗,此书便是宗.读过此书后,发现以前看过的网上好多五花八门的文章,都是源自此书. 2.举一反三.此书中讲到的jvm用到的各种思想,在工作中其实经 ...

  2. 记录c++本地文件读取组装

    class ErrorCodeConfig{ public: ErrorCodeConfig(){} ErrorCodeConfig(const ErrorCodeConfig&)=delet ...

  3. JavaScript 数组遍历方法的对比

    JavaScript 发展至今已经发展出多种数组的循环遍历的方法,不同的遍历方法运行起来那个比较快,不同循环方法使用在那些场景,下面将进行比较: 各种数组遍历的方法 for 语句 ,,,] , len ...

  4. 怎么在Linux环境下通过VS Code调试Python 3+?

    今天突然想写一写Python了,于是就开始弄.使用源码包安装好Python3.6.6之后,发现Linux下只能通过python3来调用python 3.6.6.如果直接使用python的话,调用的是系 ...

  5. jq实现鼠标经过出现上拉菜单

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  6. Webserver管理系列:12、开启关闭Ping命令

    有些时候站点打开速度会非常慢,我们要排查故障所在.须要用到Ping命令.可是Windows Server 2008防火墙默认是关闭Ping的 我们能够通过下面方法开启Ping 打开防火墙->高级 ...

  7. Mysql分区表及自动创建分区Partition

    Range分区表建表语句如下,其中分区键必须和id构成主键和唯一键 CREATE TABLE `test1` ( `id` char(32) COLLATE utf8mb4_unicode_ci NO ...

  8. 3504. [CQOI2014]危桥【最大流】

    Description Alice和Bob居住在一个由N座岛屿组成的国家,岛屿被编号为0到N-1.某些岛屿之间有桥相连,桥上的道路是双 向的,但一次只能供一人通行.其中一些桥由于年久失修成为危桥,最多 ...

  9. bzoj4403:序列统计

    我好傻啊 题目 先来看看长度只能为\(n\)的情况 那么答案非常显然是\(\binom{m+n-1}{n}\) 其中\(m=R-L+1\) 因为我们要构造一个非降序列,显然可能一个数会被选择多次,组合 ...

  10. 该网页已屏蔽以下插件Adobe Flash Player

    2017.6.9更新:多谢网友留言,该网页已屏蔽以下插件Adobe Flash Player解决方法:chrome://flags/#run-all-flash-in-allow-mode选择启用就O ...