在angular项目中使用web-component ----How to use Web Components with Angular
原文： https://medium.com/@jorgecasar/how-to-use-web-components-with-angular-41412f0bced8
-------------------------------------------------------------
I already told you about Web Components and Frameworks and now we have to put it into practice so that you can see that it does not only work in theory. As you can see, according to Custom Elements Everywhere, Angular passes all the tests so it is a good candidate to implement the use of Web Components.
Everything developed during this article can be followed step by step in the jorgecasar/tutorial-webcomponents-angular repository.
We will start with a new application, for which you can use the comando ng new tutorial-webcomponents-angular and open it in our favorite editor.
Adding Custom Elements Schema
First, we enable the Web Components in our project including CUSTOM_ELEMENTS_SCHEMA in src/app/app.module.ts:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';import { AppComponent } from './app.component';@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule
],
providers: [],
bootstrap: [AppComponent],
schemas: [
CUSTOM_ELEMENTS_SCHEMA
]
})export class AppModule { }
Adding polyfills
To ensure compatibility with older browsers it is necessary to include webcomponents polyfills.
First, install the dependency using NPM:
npm install --save @webcomponents/webcomponentsjs
Today we can not include it as a module in the polyfills.ts so we have to do a more manual process. We must indicate to Angular that he must copy certain files as assets in the angular.json file:
{
"glob": "{*loader.js,bundles/*.js}",
"input": "node_modules/@webcomponents/webcomponentsjs/",
"output": "node_modules/@webcomponents/webcomponentsjs"
}
The next thing is to add the script load in the index.html.
<script src="node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
And finally we must wait for the dependencies to load to start our app and thus make sure that the Web Components are ready to be used:
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';import { AppModule } from './app/app.module';
import { environment } from './environments/environment';declare global {
interface Window {
WebComponents: {
ready: boolean;
};
}
}if (environment.production) {
enableProdMode();
}function bootstrapModule() {
platformBrowserDynamic().bootstrapModule(AppModule)
.catch(err => console.log(err));
}if (window.WebComponents.ready) {
// Web Components are ready
bootstrapModule();
} else {
// Wait for polyfills to load
window.addEventListener('WebComponentsReady', bootstrapModule);
}
ES5 Support
ES5 Custom Elements classes will not work in browsers with native Custom Elements because ES5 classes can not extend ES6 classes correctly. So if you are going to serve your app using ES5 you will need to add this code snippet in the <head>, just before the webcomponents script included before.
<!-- This div is needed when targeting ES5.
It will add the adapter to browsers that support customElements, which require ES6 classes --><div id="ce-es5-shim">
<script type="text/javascript">
if (!window.customElements) {
var ceShimContainer = document.querySelector('#ce-es5-shim');
ceShimContainer.parentElement.removeChild(ceShimContainer);
}
</script>
<script type="text/javascript" src="node_modules/@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js"></script>
</div>
With this we have our app ready to include Web Components, so let’s create one and check its compatibility.
Creating a Web Component
We are going to install lit-element, an ultra-lightweight library for the creation of Web Components by Justin Fagnani.
npm i --save @polymer/lit-element
We created a simple component called wc-mood:
class WebComponentsMood extends LitElement {
static get properties() {
return { mood: String }
}
_render({mood}) {
return html`
<style>
.mood { color: #1976d2; }
</style><h1>Web Components are <span class="mood">${mood}</span>!</h1>`;
}
}customElements.define('wc-mood', WebComponentsMood);
And finally, we import it in the typescript file of our component, in this case app.component.ts:
import './wc-mood/wc-mood';
And we use it in the html of our component:
<my-element mood=”awesome”></my-element>
Testing the interaction with the Web Component
Now that we have the Web Component working, let’s try the interaction with it.
Set properties from Angular
The first test is to verify that the component reacts when a property is established from Angular. To do this, we create the mood property and a randomMood method that changes that property:
export class AppComponent {
moods: Array<string> = ['awesome', 'formidable', 'great', 'terrifying', 'wonderful', 'astonishing', 'breathtaking'];
mood: string;constructor() {
this.randomMood();
}randomMood() {
const index = Math.floor(Math.random()*this.moods.length);
this.mood = this.moods[index];
}
}
And we make the corresponding change in the html to establish the property and we make that by clicking on the Angular logo we establish another value to the property:
<wc-mood [attr.mood]="mood"></wc-mood>
<img (click)="randomMood()"/>
Listen to events from Angular
To complete the interaction, we will launch an event from the component to listen to it from Angular.
In the Web Component we will notify the changes in the properties sending the event:
_didRender(_props, _changedProps, _prevProps) {
this._notifyPropsChanges(_props, _changedProps);
}_notifyPropsChanges(_props, _changedProps) {
for(let prop in _props) {
this.dispatchEvent(
new CustomEvent(prop + '-changed', {
detail: { value: _changedProps[prop] }
})
);
}
}
For simplicity, we will notify all changes in the properties. And to standardize we will send the event [prop]-changed where [prop] is the name of the property, in our case mood. We do this because it is the most logical from my point of view and also both Angular and Polymer use this pattern, so we can begin to standardize it
在angular项目中使用web-component ----How to use Web Components with Angular的更多相关文章
- angular项目中各个文件的作用
原文地址 https://www.jianshu.com/p/176ea79a7101 大纲 1.对angular项目中的一些文件的概述 2.对其中一些文件的详细描述 2.1.package.json ...
- gulp 在 angular 项目中的使用
gulp 在 angular 项目中的使用 keyword:gulp,angularjs,ng,ngAnnotate,jshint,gulpfile 最后附完整简洁的ng项目gulpfile.js 准 ...
- Angular 项目中如何使用 ECharts
在有些使用 ECharts 库的 Angular 项目中,通常除了安装 npm 包之外,还会在 angular.json 中配置 “build.options.scripts”,将 “node_mod ...
- angular项目中遇到的问题
一.angular项目中如何实现路由缓存 需要实现的效果,对请求的数据进行缓存,比如进入文章详情页之后点击返回,不会再调用后台数据接口:而是加载缓存中的数据,如何数据变动的情况下,可使用下拉刷新刷新页 ...
- angular项目中使用Primeng
1.第一步把依赖添加到项目中 npm install primeng --save npm install @angular/animations --save npm install font-aw ...
- Angular项目中共享模块的实现
创建share Modele:ng g m share import进来所有需要共享的模块都export出去, 一.共享CommonModule 暂时只有CommonModule,以后会有一些需要共享 ...
- Angular项目中引入jQuery
npm install --save jquery npm install @types/jquery --save 在对应的组件中引入 import * as $ from "jquery ...
- 在angular项目中使用bootstrap的tooltip插件时，报错Property 'tooltip' does no t exist on type 'JQuery<HTMLElement>的解决方法和过程
在angular4的项目中需要使用bootstrap的tooltip插件. 1. 使用命令安装jQuery和bootstrap npm install bootstrap jquery --save ...
- angular项目中使用jquery的问题
1.使用npm命令往项目中添加jQuery. npm install jquery --save 2.在你想要用jQuery的组件中添加. import * as $ from "jquer ...
随机推荐
- mysql 中不等于过滤 null 的问题（同时比较等于，大于和小于）
在写 SQL 条件语句是经常用到 不等于'!='的筛选条件,此时要注意此条件会将字段为 null 的数据也当做满足不等于的条件而将数据筛选掉. 1.原始数据和表结构 CREATE TABLE `tes ...
- MySQL优化详解
MySQL优化 MYSQL优化主要分为以下四大方面: 设计:存储引擎,字段类型,范式与逆范式 功能:索引,缓存,分区分表. 架构:主从复制,读写分离,负载均衡. 合理SQL:测试,经验. 一.存储引擎 ...
- python 工具的URL
Python取得大数据之后如何把数据图形化,之后让客户很清晰的看到你的结果 下面的图形化参照 matplotlib.3.0.2 https://matplotlib.org/gallery/index ...
- Quartz.Net—JobBuilder
JobBuilder JobBuilder是一个建造者模式,链式建造.通过静态方法构建一个JobBuilder实例,然后再调用类方法Build()创建一个IJobDetail的实现. 1.静态方法 p ...
- java实现邮箱发送邮件功能
邮箱验证是一个很常见的功能了,基本上每个网站都会用的到,java也有专门的jar来处理邮件发送等服务,这里只是简单的实现一下发送邮件的功能,具体jar包就不再提供了,我会把所有需要引用的包都贴出来,方 ...
- io.lettuce.core.protocol.ConnectionWatchdog - Reconnecting, last destination was ***
一.问题 redis起来后一直有重连的日志,如下图: 二.分析 参考lettuce-core的github上Issues解答https://github.com/lettuce-io/lettuce- ...
- Tomcat HTTP connector和AJP connector
Tomcat服务器通过Connector连接器组件与客户程序建立连接,“连接器”表示接收请求并返回响应的端点.即Connector组件负责接收客户的请求,以及把Tomcat服务器的响应结果发送给客户. ...
- hdu 1075 map的使用 字符串截取的常用手段 以及string getline 使用起来的注意事项
首先说字符串的截取套路吧 用坐标一个一个的输入 用遍历的方式逐个去检查字符串中的字符是否为符合的情况 如果是的话 把该字符放入截取string 中 让后坐标前移 如果不是的话 截取结束 坐标初始化 然 ...
- hdu1171 灵活的运用背包问题咯。。。 还有！！！！ 合理的计算数组的范围！！ wa了好多次！
Problem Description Nowadays, we all know that Computer College is the biggest department in HDU. Bu ...
- EfCore基本用法
db first 和 code first的基本使用方法 https://www.cnblogs.com/Starts_2000/p/mysql-efcore20-codefirst-dbfirst- ...