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

我已经从一个angular组件中创建了一个angular自定义元素，我希望从一个普通的html页面中调用它。

组件需要一个参数，当它在angular项目中作为组件被调用时，这个参数才会起作用，但我不知道如何将参数从html标签传递到自定义元素。

当前我正在尝试使用:

@Input() crs: string

和:

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

在HTML标签中，但是CRS永远不会让它进入组件。

我想知道的是正确的方式传递参数从html标签到组件后，它已转换为自定义元素?

我最终解决了这个问题，所以下面是我写的如何做到这一点:

如何创建和使用自定义元素

安装角元素

添加@angular/elements

npm I——save-dev concat fs-extra
。Json，确保目标使用es2015或更新版本:
"target"es2015",
将以下内容添加到app.module.ts

= =比;添加导入

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

= =比;将组件添加到bootstrap数组

bootstrap: [AppComponent]

= =比;将构造函数更改为以下内容:

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() {}

要使参数能够从HTML标签传递到自定义元素，请执行以下步骤

使用@Input接受任何输入参数，并更改从ActivatedRoute检索的任何参数以使用@Input变量

注意:为了确保HTML标签上的输入变量绑定到@Input属性，您必须将标签属性名称传递给@Input方法，即@Input('crs')(参见下面的示例)

。删除这些:

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

添加这些(在导出类之后插入):

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

在ngOnInit()中，导航到组件，传递任何输入参数:例如
this.router。navigateByUrl('/station-details/' + this。s + '/' + this.stationName);

删除(因此没有自动路由):

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

在适当的路径上传递任何参数:

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

在自定义HTML标签

中添加如下参数:

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

在根目录下创建一个build-component.js文件，内容如下注意:dist/dev是编译器自动创建的文件夹结构
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 '
);等待fs.ensureDir("station-info");//<——此处使用与customElements.define中相同的名称
await concat(files， 'station-info/station-info.js');//<——这是您希望保存结果文件的位置}
build ();
编译并连接结果文件

= =比;将build-component.js脚本添加到package.json

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

= =比;运行脚本

npm run build:component

要使用自定义元素，请将以下内容添加到html页面中注意:您还必须确保自定义元素所需的任何外部资产都存在，例如图像和文件

如果你想传递一个参数:

可以使用属性绑定将数据从父级传递给子级。

一样,使用属性绑定将子元素中的item属性绑定到父元素的currentItem属性。

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

在父组件类中，为currentItem指定一个值:

export class AppComponent {
currentItem = 'Television';
}

链接到angular文档:https://angular.io/guide/inputs-outputs

相关内容

最新更新

热门标签：