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的更多相关文章

  1. 示例可重用的web component方式组织angular应用模块

    在online web应用中,经常有这样的需求,能够让用户通过浏览器来输入代码,同时能够根据不同的代码来做语法高亮.大家已知有很多相应的javascript库来实现语法高亮的功能,比如codemirr ...

  2. 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 ...

  3. 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 ...

  4. web components & publish custom element & npm

    web components & publish custom element & npm https://www.webcomponents.org/publish Polymer ...

  5. [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 ...

  6. WebComponent魔法堂:深究Custom Element 之 从过去看现在

    前言  说起Custom Element那必然会想起那个相似而又以失败告终的HTML Component.HTML Component是在IE5开始引入的新技术,用于对原生元素作功能"增强& ...

  7. Web Component探索

    概述 各种网站往往需要一些相同的模块,比如日历.调色板等等,这种模块就被称为“组件”(component).Web Component就是网页组件式开发的技术规范. 采用组件进行网站开发,有很多优点. ...

  8. WebComponent魔法堂:深究Custom Element 之 标准构建

    前言  通过<WebComponent魔法堂:深究Custom Element 之 面向痛点编程>,我们明白到其实Custom Element并不是什么新东西,我们甚至可以在IE5.5上定 ...

  9. Web Component

    前言 Web Component不是新东西,几年前的技术,但是受限于浏览器兼容性,一直没有大规模应用在项目里,直到现在(2018年年末),除IE仍不支持之外,其它主流浏览器都支持Web Compone ...

随机推荐

  1. delphi ----日期控件运用,日期问题，日期时间比较

    一.日期控件 1.DateTimePicker 1)只显示年月 DateMode:dmUpDown format:yyyy-MM 2)将DateTimePicker的Format属性中加入日期格式设成 ...

  2. 关于Nginx部署Django项目的资料收集

    参考:https://www.cnblogs.com/chenice/p/6921727.html 参考:https://blog.csdn.net/fengzq15/article/details/ ...

  3. git学习------>如何用git log命令来查看某个指定文件的提交历史记录

    有时候接手一份新代码时,看到某些文件的改动,但不清楚这个改动的作者和原因,想查看该文件的具体提交历史记录. 今天一个同事是这样做的,直接敲git log命令,然后再使用vim命令的搜索关键字的方法来查 ...

  4. linux下Tomcat shutdown无效

    问题: linux下Tomcat shutdown无效 linux下关闭tomcat后,发现重新启动Tomcat后.port号提示被占用, 原因: 这时可能是项目中的后台线程或者socket依旧在执行 ...

  5. 003-基于URL的权限管理[不使用shiro]

    一.基于url权限管理流程[实现步骤] 基于url拦截是企业中常用的权限管理方法,实现思路是:将系统操作的每个url配置在权限表中,将权限对应到角色,将角色分配给用户,用户访问系统功能通过Filter ...

  6. [ngClass]、[ngStyle]的基本使用（转载）

    1.ngStyle 基本用法 <div [ngStyle]="{'background-color':'green'}"></<div> 判断添加 & ...

  7. redis实现队列queue

    参考:<Redis入门指南>第4章进阶 http://book.51cto.com/art/201305/395461.htm 4.4.2 使用Redis实现任务队列 说到队列很自然就能想 ...

  8. go——通道（二）

    在Go语言里面,你不仅可以使用原子函数和互斥锁来保证对共享资源的安全访问以消除竞争状态, 还可以使用通道,通过发送和接收需要共享的资源,在goroutine之间做同步. 当一个资源需要在gorouti ...

  9. Matplot相关(一)

    ——————————缩写定义—————————— import matplotlib.pyplot as plt import matplotlib as mpl ——————————函数解析———— ...

  10. SVN插件下载地址及更新地址

    SVN插件下载地址及更新地址,你根据需要选择你需要的版本.现在最新是1.8.xLinks for 1.8.x Release:Eclipse update site URL: http://subcl ...