Angular Elements
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的更多相关文章
- [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 ...
- [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 ...
- [Angular] Angular Elements Intro
Make sure install the latest Angular v6 with Angular CLI. Checkout ght Github for the code. 1. Creat ...
- [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 ...
- [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 ...
- Angular v6 正式发布
Angular 6 正式发布 Angular 6 已经正式发布了!这个主要版本并不关注于底层的框架,更多地关注于工具链,以及使 Angular 在未来更容易快速推进. 作为发布的一部分,我们同步了主要 ...
- Angular 7 版本
Angular 7 版本 这是跨整个平台的主要版本,更新包括核心框架,Angular Material和CLI. 如何更新到v7 可以访问update.angular.io以获取有关更新应用程序的详细 ...
- angular custom Element 自定义web component
angular 自定义web组件: 首先创建一个名为myCustom的组件. 引入app.module: ... import {customComponent} from ' ./myCustom. ...
- Angular6.0发布
Angular v6 新版本重点关注工具链以及工具链在 Angular 中的运行速度问题. Angular v6 是统一整体框架.Material 和 CLI 三大 Angular 组件的第一个版本, ...
随机推荐
- C# 多维数组 交错数组的区别,即 [ , ] 与 [ ][ ]的区别
多维数组的声明 在声明时,必须指定数组的长度,格式为 type [lenght ,lenght ,lengh, ... ] int [,] test1 = new int [3,3]; 或声明时即赋值 ...
- 021.10 IO流 打印流
内容:PrintStream:字节流 PrintWriter:字符流 PrintStream public static void main(String[] args) throws IOEx ...
- Redux 源码解读 —— 从源码开始学 Redux
已经快一年没有碰过 React 全家桶了,最近换了个项目组要用到 React 技术栈,所以最近又复习了一下:捡起旧知识的同时又有了一些新的收获,在这里作文以记之. 在阅读文章之前,最好已经知道如何使用 ...
- GPU性能:光栅化、图层混合、离屏渲染
So, shouldRasterize will not affect the green/red you see using Instruments. In order to have everyt ...
- z-index终结者
版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/wangshuxuncom/article/details/30280627 z-in ...
- [转]CentOS 7忘记root密码解决办法
转自:http://www.linuxidc.com/Linux/2016-08/134034.htm 亲测可用! CentOS 7 root密码的重置方式和CentOS 6完全不一样,CentOS ...
- 【NOIP2017】宝藏
题目描述 参与考古挖掘的小明得到了一份藏宝图,藏宝图上标出了 \(n\) 个深埋在地下的宝藏屋, 也给出了这 \(n\) 个宝藏屋之间可供开发的 \(m\) 条道路和它们的长度. 小明决心亲自前往挖掘 ...
- PAT——1037. 在霍格沃茨找零钱
如果你是哈利·波特迷,你会知道魔法世界有它自己的货币系统 —— 就如海格告诉哈利的:“十七个银西可(Sickle)兑一个加隆(Galleon),二十九个纳特(Knut)兑一个西可,很容易.”现在,给定 ...
- Mysql数据库写入数据速度优化
Mysql数据库写入数据速度优化 1)innodb_flush_log_at_trx_commit 默认值为1:设置为0,可以提高写入速度. 值为0:提升写入速度,但是安全方面较差,mysql服务器 ...
- datatable的excel导入,其中有关于datatables的很多参数设置
datatable的excel导入,其中有关于datatables的很多参数设置 http://www.cnblogs.com/liyuhuan/p/5633095.html