[Angular] Angular Elements Intro
Make sure install the latest Angular v6 with Angular CLI. Checkout ght Github for the code.
1. Create a new application:
ng new elementApp
2. Install @angular/elements package:
ng add @angular/elements --project-name=<your_project_name>
3. Generate a component:
ng g c course-title
4. Conver the element to angular elements: First we need to add our component to 'entryComponents'
import { BrowserModule } from '@angular/platform-browser';
import { NgModule, Injector } from '@angular/core';
import { createCustomElement } from '@angular/elements';
import { AppComponent } from './app.component';
import { UserPollComponent } from './user-poll/user-poll.component'; @NgModule({
declarations: [ UserPollComponent],
entryComponents: [CourseTitleComponent],
imports: [BrowserModule]
})
export class AppModule {
constructor(private injector: Injector) {} }
5. Connect Custom Element Web API inside our component:
// course title constructor(
private injector: Injector
)} ngOnInit() {
const htmlElement = createCustomElement(CourseTitleComponent, {injector: this.injector});
customElements.define('couse-title', htmlElement )
}
6. Now the Angular Element should already work in the broswer. If we want to use Angular Element inside Angular Application, we should add 'schemas':
@NgModule({
imports: [
CommonModule
],
...
schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
7. If you want to dynamic insert Angular Element into Angular application, such as:
export class AppComponent {
addEl() {
const container = document.getElementById('container');
container.innerHTML = '<course-title></course-title>';
}
}
You need to add polyfill in order to make it work:
npm i --save-dev @webcomponents/webcomponentsjs
Then add into polyfills.js:
..
* APPLICATION IMPORTS
*/ import '@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js';
[Angular] Angular Elements Intro的更多相关文章
- [Angular 2] Directive intro and exportAs
First, What is directive, what is the difference between component and directive. For my understandi ...
- [Angular] Angular CDK Intro
1. Installl latest @angular/cli: sudo npm i -g @angular/cli@next The version I used is:6.0.0-rc.10 2 ...
- [Angular 2] Select From Multiple Nested Angular 2 Elements
You have complete control over the elements you nest inside of your component instance by using sele ...
- [Angular 2] Simple intro Http
To use http, we need to import the HTTP_PROVIDER, so that we can inject http to other component: imp ...
- Angular - - angular.Module
angular.Module Angular模块配置接口. 方法: provider(name,providerType); name:服务名称. providerType:创建一个服务的实例的构造函 ...
- Angular - - angular.injector、angular.module
angular.injector 创建一个injector对象, 调用injector对象的方法可用于获取服务以及依赖注入. 格式:angular.injector(modules); modules ...
- Angular - - Angular数据类型判断
angular.isArray 判断括号内的值是否为数组. 格式:angular.isArray(value); value: 被判断是否为数组的值. ------------------------ ...
- Angular - - angular.uppercase、angular.lowercase、angular.fromJson、angular.toJson
angular.uppercase 将指定的字符串转换成大写 格式:angular.uppercase(string); string:被转换成大写的字符串. 使用代码: var str = &quo ...
- Angular - - angular.bind、angular.bootstrap、angular.copy
angular.bind 返回一个调用self的函数fn(self代表fn里的this).可以给fn提供参数args(*).这个功能也被称为局部操作,以区别功能. 格式:angular.bind(se ...
随机推荐
- RxSwift 系列(四)
前言 本篇文章将要学习RxSwift中四种转换操作符: map flatMap flatMapLatest scan map 通过使用一个闭包函数将原来的Observable序列转换为一个新的Obse ...
- FastReport.Net使用:[15]富文本控件使用
富文本(Rich Text)控件用于显示Rtf格式的文本. 认识富文本编辑窗体 1.下图就是富文本的编辑窗体,乍一看就像Word一样,不过功能没有Word强大了.具体功能就不一一介绍了,用个Word的 ...
- 【BZOJ 2121】 (字符串DP,区间DP)
2121: 字符串游戏 Description BX正在进行一个字符串游戏,他手上有一个字符串L,以及其他一些字符串的集合S,然后他可以进行以下操作:对于一个在集合S中的字符串p,如果p在L中出现,B ...
- 利用yii2分页插件,成对取出数组数据
数组太大不好处理,切割出来处理 $ids = [1, 2, 3, 4, 5, 6, 7, 8, 9]; $count = count($ids);$size = 2; $pages = new Pag ...
- Java 基础总结--反射的基本操作
一.反射的概念 JAVA反射机制是在运行状态中,对于任意一个类,都能够知道这个类的所有属性和方法:对于任意一个对象,都能够调用它的任意一个方法和属性:这种动态获取的信息以及动态调用对象的方法的功能称为 ...
- OpenWrt包管理软件opkg的使用(极路由)
说明: 1.OpenWrt本身系统没什么问题,关键点是一些路由器尝试的限制,比如一些厂商设置成内存分区为只读,那么这个安装软件就变得没什么意义了. 2.opkg的操作有点反人类,正常步骤是查询,安装: ...
- .NET 4.6的RyuJIT尾递归优化的Bug
今天看到园子里有一篇新闻稿.NET 4.6的RyuJIT编译器中发现严重的Bug提到,在.Net 4.6的x64程序中默认启用新的JIT程序RyuJIT在处理尾递归指令的时候有一个Bug,导致无法得到 ...
- Appium+python自动化15-在Mac上环境搭建
前言 mac上搭建appium+python的环境还是有点复杂的,需要准备的软件 1.nodejs 2.npm 3.cnpm 4.appium 5.pip 6.Appium-Python-Client ...
- SharePoint 2013 App 示例之图片墙
应用程序实质上是 Web 应用程序.如果您知道如何生成 Web 应用程序,则您就知道如何生成 SharePoint 相关应用程序.您可以使用任何语言,如 HTML.JavaScript.PHP 或 . ...
- [翻译] TLMotionEffect 重力感应
TLMotionEffect 重力感应 https://github.com/jvenegas/TLMotionEffect This category adds a motion effect t ...