如何将参数从 html 页面传递到 angular 自定义元素

Question

I've created an angular custom element from an angular component that I want call from a normal html page.

The component requires a parameter, which works when it's called as a component from within an angular project, but I cannot figure out how to pass the parameter from the html tag to the custom element.

Current I'm trying to use:

  @Input() crs: string

in the component and:

<station-info crs="btn"></station-info>

in the html tag, but the crs never makes it into the component.

What I'd like to know is the correct way to pass the parameter from the html tag to the component after it has been converted to a custom element?

Answer 1

I eventually worked it out, so here's my write up of how to do it:

How To Create And Use A Custom Element

1. Install angular elements

   ng add @angular/elements

   npm i --save-dev concat fs-extra

2. In tsconfig.json, ensure target uses es2015 or newer:

   "target": "es2015",

3. Add the following to app.module.ts

==> Add the imports

import  { Injector} from '@angular/core';
import  { createCustomElement } from '@angular/elements';

==> Add the component to the bootstrap array

bootstrap: [AppComponent]

==> Change the constructor to the following:

  constructor(
    private injector: Injector
  ) {
    const el = createCustomElement(AppComponent, { injector });
    customElements.define('station-info', el); // <-- 'station-info' is the name of the html tag you want to use
  }

  ngDoBootstrap() {}

4. To enable parameters to be passed from the HTML tag to the custom element, do the following steps

In app.component.ts:

• Accept any input parameters using @Input and change any parameters retrieved from ActivatedRoute to use the @Input variables

Note: To ensure the input variables on the HTML tag are bound to the @Input properties, you must pass the tag attribute name to the @Input method ie @Input('crs') (see example below)

eg Delete these:

this.crs = this.activatedRouteService.snapshot.params.crs.toLowerCase();
this.stationName = this.activatedRouteService.snapshot.params.stationName.toLowerCase();

Add these (insert after export class):

@Input('crs') crs: string
@Input('stationName') stationName: string;

• In ngOnInit(), navigate to the component, passing on any input parameters: eg

  this.router.navigateByUrl('/station-details/' + this.crs + '/' + this.stationName);

In app-routing.module.ts

Delete (so there is no automatic routing):

{ path: '', redirectTo: 'station-details', pathMatch: 'full' },

Pass any parameters on the appropriate path:

{ path: 'station-details/:crs/:stationName', component: StationDetailsComponent,

In the custom HTML tag

Add the parameters as follows:

<station-info crs="btn" station-name="Brighton" client="tl" has-template="true"></station-info>

5. Create a build-component.js file in the root folder with the following content Note: dist/dev is the folder structure automatically created by the compiler

   const fs = require('fs-extra');

   const concat = require('concat');

   build = async () =>{ const files = [ './dist/dev/runtime.js', './dist/dev/polyfills.js', './dist/dev/scripts.js', './dist/dev/main.js' ];

   await fs.ensureDir('station-info'); // <-- Use the same name here as in customElements.define

   await concat(files, 'station-info/station-info.js'); // <-- this is where you want to save the resulting files }

   build();

6. Compile and concatenate the resulting files

==> Add build-component.js script to package.json

"scripts": {
  "build:component": "ng build --configuration production --output-hashing none && node build-component.js",
}

==> Run the script

npm run build:component

7. To use the custom element, add the following to an html page Note: You also have to ensure any external assets that the custom element requires are present eg images and files

• If you want to pass a parameter:

Answer 2

You can use property binding to pass data from parent to child.

Like so, Use property binding to bind the item property in the child to the currentItem property of the parent.

<app-item-detail [item]="currentItem"></app-item-detail>

In the parent component class, designate a value for currentItem:

export class AppComponent {
  currentItem = 'Television';
}

Link to angular docs: https://angular.io/guide/inputs-outputs