angular custom Element 自定义web component
angular 自定义web组件:
首先创建一个名为myCustom的组件。
引入app.module:
...
import {customComponent} from ' ./myCustom.component'; @NgModule({
declarations:[AppComponent,customComponent],
entryComponents:[customComponent]
....
}) export class AppModule{}
全局注册：
app.component:
import { Component,Injector} from '@angular/core';
import { createCustomElement} from '@angular/elements';
import {customComponents} from './myCustom.component';
@Component({
})
export class AppComponent{
constructor(private injector:Injector){
const customElementRef=createCustomElement(createCustomElement,{injector});
customElements.define('my-test',customElementRef);
}
}
Ok,这样完成了'my-test'的全局，接下来可以像是用web component那样使用它了.
进入我们的主html：
Index.html
<html> <body>
<app-root></app-root>
<!-- 这是angular程序主引导接口 --> <my-test></my-test>
<!-- 全局注册的angular组件可以直接放在html里使用-->
</body> </html>
注意：
1. 放在app-root前面，效果是一样的。没有先后之分。
2. my-test的注入依赖，继承自app.component。你可以放心地在里面使用。
3. 作为web component 时，input不能接受变量。output不生效。。
问：
既然angular可以注册全局web component ,那么是否能结合react使用？
当然可以，接着上面的列子：
<html> <body>
<app-root></app-root>
<!-- 这是angular程序主引导接口 --> <my-test></my-test>
<!-- 全局注册的angular组件可以直接放在html里使用-->
<div id='react-app'></div>
</body>
<!-- 引入react.js --> <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script> <script type='text/babel'>
class ReactApp extends React.Component{
state={
showAngularComponent:false
}
render(){
const state=this.state;
return (
<div>
{state.showAngularComponent?<my-test></my-test>:null}
<button onClick={()=>this.setState({showAngularComponent:!state.showAngularComponent})}>toggle</button>
</div>
) }
} ReactDOM.render(<ReactApp/>,document.getElementById('react-app')) </script>
</html>
完美运行。
angular component 注册为web component 的技术。让angular的灵活性瞬间暴涨！但是那么有必要结合react使用吗？
当然是得依你的业务要求来定了，比如你的领导强行指定你使用react。
但是当你面对一些功能复杂的组件或页面开发时，react的相对低下的效率，以及大面积重复计算、缓慢的性能，可能让你非常苦恼。此时或许你能考虑下用angular便捷迅速地为你的react项目提供一个高性能且稳定的组件。
加上ng6再一次减肥，核心库如同jquery一样的大小，angular的未来，一片光明。
---
使用custom element之前：
安装webcomponents填充库:
npm install webcomponents/webcomponentsjs --save;
polyfill.ts中引入:
import '@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js'
angular custom Element 自定义web component的更多相关文章
- 示例可重用的web component方式组织angular应用模块
在online web应用中,经常有这样的需求,能够让用户通过浏览器来输入代码,同时能够根据不同的代码来做语法高亮.大家已知有很多相应的javascript库来实现语法高亮的功能,比如codemirr ...
- Vue报错之" [Vue warn]: Unknown custom element: <wzwzihello> - did you register the component correctly? For recursive components, make sure to provide the "name" option."
一.报错截图 [Vue warn]: Unknown custom element: <wzwzihello> - did you register the component corre ...
- vue报错[Vue warn]: Unknown custom element: <router-Link> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
vue浏览器报错,如下 vue.runtime.esm.js?2b0e:619 [Vue warn]: Unknown custom element: <router-Link> - di ...
- web components & publish custom element & npm
web components & publish custom element & npm https://www.webcomponents.org/publish Polymer ...
- [Vue warn]: Unknown custom element: <sapn> - did you register the component correctly? For recursive components, make sure to provide the "name" option. found in ---> <Evaluate> at src/views/index/
关于vue报错: [Vue warn]: Unknown custom element: <sapn> - did you register the component correctly ...
- WebComponent魔法堂:深究Custom Element 之 从过去看现在
前言 说起Custom Element那必然会想起那个相似而又以失败告终的HTML Component.HTML Component是在IE5开始引入的新技术,用于对原生元素作功能"增强& ...
- Web Component探索
概述 各种网站往往需要一些相同的模块,比如日历.调色板等等,这种模块就被称为“组件”(component).Web Component就是网页组件式开发的技术规范. 采用组件进行网站开发,有很多优点. ...
- WebComponent魔法堂:深究Custom Element 之 标准构建
前言 通过<WebComponent魔法堂:深究Custom Element 之 面向痛点编程>,我们明白到其实Custom Element并不是什么新东西,我们甚至可以在IE5.5上定 ...
- Web Component
前言 Web Component不是新东西,几年前的技术,但是受限于浏览器兼容性,一直没有大规模应用在项目里,直到现在(2018年年末),除IE仍不支持之外,其它主流浏览器都支持Web Compone ...
随机推荐
- Spoken English Practice（I'm gonna do something I never thought I'd be able to）
绿色:连读: 红色:略读: 蓝色:浊化: 橙色:弱读 下划线_为浊化 口语蜕变(2017/7/6) 英 ...
- 12.php中无比坑爹的构造函数。
当你在php类中,写一个构造方法时,记得,一定要用__这是两个下划线,而不是一个.......... <?php class Car { // function _construct() { / ...
- Java 语言基础之语句
程序的四种流程控制结构: 顺序结构 判断结构 : if 语句 选择结构 : switch 语句 循环结构 : while 语句, do...while 语句, for 语句 以下主要分析循环结构: w ...
- Leetcode 之 Valid Triangle Number
611. Valid Triangle Number 1.Problem Given an array consists of non-negative integers, your task is ...
- （2.2）学习笔记之mysql基础操作（登录及账户权限设置）
本系列学习笔记主要讲如下几个方面: 本文笔记[三:mysql登录][四:账户权限设置][五:mysql数据库安全配置] 三.mysql登录 常用登录方式如下: 四.账户权限设置 (4.1)查看用户表, ...
- windows10下安装face_recongnition
第一步:安装vistual studio,我安装的是最新版本2017. 另外,并且因为要学习C# ,选了所需要的东西.暂不知这一步是否必需. 第二步:接下来安装boost 通过此链接:https:// ...
- C# 创建单例你会几种方式？
关于为什么需要创建单例?这里不过多介绍,具体百度知. 关于C# 创建单例步骤或条件吧 1.声明静态变量:2.私有构造函数(无法实例化)3.静态创建实例的方法:至于我这里的Singleton是seal ...
- Linux查看系统信息及系统性能检测命令
查看系统信息: ~# uname -a (Linux查看版本当前操作系统内核信息)Linux iZ23onhpqvwZ 3.13.0-30-generic #54-Ubuntu SMP Mon Jun ...
- Excel数据常用操作，vlookup,text,trim,数据格式导致出错
数据有缺漏,需要在数据前面补零 =TEXT(F70,"000000") 前面是要操作的数据,后面是补几位 匹配数据(将一个表格中的数据进行匹配) =VLOOKUP(C2,aaa,4 ...
- ptyhon从入门到放弃之操作系统基础
*2.操作系统操作系统基础1.什么是操作系统操作系统就是一个协调.管理和控制计算机硬件和软件的控制程序.2.为何要有操作系统现代的计算机系统主要是由一个或者多个处理器,主存,硬盘,键盘,鼠标,显示器, ...