zoukankan      html  css  js  c++  java
  • [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';
  • 相关阅读:
    巧用SQL Server Profiler
    Linq结果直接返回实体对象
    C#(MVC) Word 替换,填充表格,导出并下载PDF文档
    C#匿名类型(Anonymous Type)学习日记
    C#Lambda表达式学习日记
    C#事件(Event)学习日记
    C#委托(Delegate)学习日记
    C#隐私信息(银行账户,身份证号码,名字)中间部分特殊字符替换(*)
    CSS布局模型
    Visual Studio 内置快速生产代码简写集合
  • 原文地址:https://www.cnblogs.com/Answer1215/p/8992242.html
Copyright © 2011-2022 走看看