前端 angular custom elements include

anxing7 · May 05, 2020 · 2 hits

Basic

  1. Copy js and css file
    Architecture

  2. Create new folder and add index.html
    Architecture

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    <!doctype html>
    <html lang="en">
    <head>
    <title>Angular Elements Demo</title>
    </head>
    <body>
    <app-activeuser user="Joey Tribbiani"></app-activeuser>
    <script src="elements.js"></script>
    </body>
    </html>

  3. Open from browser
    Architecture

Include with Angular

  1. Create js file under assets
    Architecture

  2. index.html

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>IncludeCustomElements</title>
    <base href="/">

    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" type="image/x-icon" href="favicon.ico">
    </head>
    <body>
    <app-root></app-root>
    <app-activeuser user="Joey Tribbiani"></app-activeuser>
    <script src="./assets/js/elements.js"></script>
    </body>
    </html>

  3. Open from browser
    Architecture

Include with Angular lazy

  1. Create js file under assets
    Architecture

  2. Download extensions elements
    npm i @angular-extensions/elements

  3. Create component
    ng g c feature --spec false

  4. feature.component.ts

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    import { Component } from '@angular/core';

    @Component({
    selector: 'app-feature',
    template: `
    <app-activeuser user="Joey Tribbiani" *axLazyElement="elementUrl"></app-activeuser>
    `
    })
    export class FeatureComponent {
    elementUrl = 'http://localhost:4200/assets/js/elements.js';
    }

  5. app.component.html

    1
    2
    <app-feature></app-feature>
    <router-outlet></router-outlet>

  6. app.module.ts

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    import { BrowserModule } from '@angular/platform-browser';
    import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
    import { LazyElementsModule } from '@angular-extensions/elements';

    import { AppRoutingModule } from './app-routing.module';
    import { AppComponent } from './app.component';
    import { FeatureComponent } from './feature/feature.component';

    @NgModule({
    schemas: [CUSTOM_ELEMENTS_SCHEMA],
    declarations: [
    AppComponent,
    FeatureComponent
    ],
    imports: [
    BrowserModule,
    AppRoutingModule,
    LazyElementsModule
    ],
    providers: [],
    bootstrap: [AppComponent]
    })
    export class AppModule { }

  7. Open from browser
    Architecture

Reference

@angular-extensions/elements

No Reply at the moment.
You need to Sign in before reply, if you don't have an account, please Sign up first.