在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 ...
随机推荐
- centos7.6 升级openssh openssl
centos7.3和centos7.6升级完毕测试登录ssh以及重启后登录ssh均无问题. 前期请自行配置好yum源(如果不会请百度) 整个过程不需要卸载原先的openssl包和openssh的rpm ...
- Django 操作已经存在的数据库
反向操作数据库 何为反向操作.即是数据库在项目之前已经存在,不需要新建表,操作已经存在的表 # 进入站点目录下执行 python manage.py inspectdb #可以看到settings中连 ...
- KVM虚拟机两种配置的概念不同之处
KVM虚拟机配置的两种方式之间的不同之处 NAT方式 NAT模式中,让虚拟机借助NAT(网络地址转换)功能,通过宿主机器所在的网络来访问公网. NAT模式中,虚拟机的网卡和物理网卡的网络,不在同一个网 ...
- Action<T>和Func<T>委托事例
Action<T>和Func<T>委托事例 using System; //除了为每个参数和返回类型定义一个新委托类型之外,还可以使用Action<T>和Func& ...
- .NET Core IOC AOP
IOC简介 IOC思想 把类当做组件或服务来看待,组件内一定要高内聚,组件之间一定要低耦合,既然要保持低耦合,那就一定不要轻易的去new什么对象. 那组件之间的交互怎么处理呢?那最好的方式就是把new ...
- Object 方法的 hashCode，equals方法源码
文章目录 hashCode方法注释 equals 方法注释 equals 方法 hashCode方法注释 Object 的 hashCode 方法,是本地方法: Returns a hash code ...
- 前端小tite（随笔）
前端 自定义居中#照片 万能s居中 .second-listleft{/*固定位置*/ position: relative; float: left; width: 25%; height: 100 ...
- docker 实践七：docker-machine
本篇是关于 docker 三剑客中的 docker machine. 注:环境为 CentOS7,docker 19.03. docker-machine 是 docker 官方三剑客项目之一,它是一 ...
- 使用parted对Linux未分区部分进行分区
1. 使用命令parted -l 查看当前分区 可以看到硬盘有2396GB即有2.5T , 但是分区就分了50G一个盘, 需要分剩下部分 [root@localhost ~]# parted -l M ...
- consul客户端配置微服务实例名称和ID
consul客户端必须配置微服务实例名称和ID,微服务启动的时候需要将名称和ID注册到注册中心,后续微服务之间调用也需要用到. 名称可以通过以下两种方式配置,优先级从高到低.两个都不配置则默认服务名称 ...