angular-element-自定义标签

一.  什么是angular自定义标签？

angular自定义标签，就是将angular里面的某些component转换成一个自定义标签，这个标签可以在任何平台使用，而不依赖angular，真的做到了跨平台使用。

二. 如何使用angular自定义标签？

有一些可以借鉴的网站可以先看下：

angular 官方地址：https://angular.io/guide/elements

链接1. https://tso1158687.github.io/blog/2020/04/06/introduce-to-angular-elements/

链接2. https://fullstackladder.dev/blog/2018/05/08/angular-advanced-angular-elements-intro/

 

步骤：

1. 在angular项目中添加angular elements

ng add @angular/elements

 

2. 修改app.module.ts

@NgModule({
  declarations: [...],
  imports: [...],
  providers: [...],
  bootstrap: [AppComponent]
})

移除掉 bootstrap: [AppComponent]

并修改为：
export class AppModule {
  constructor(injector: Injector) {
    const RevisedSearchElement: any = createCustomElement(RevisedSearchComponent, { injector });
    customElements.define('revised-search', RevisedSearchElement);
  }
  ngDoBootstrap() {}
 }

3. 修改index.html

<body>
  <app-root></app-root>
</body>
为
<body>
  <revised-search></revised-search>
</body>

 

这样的话，在anguar 的index页面就引用了自定义标签 <revised-search></revised-search>,可以成功运行

4. 如果想在非当前的angular项目中使用这个自定义标签：

 a. 修改package.json ，去掉打包时候的hash

"build": "ng build --prod --output-hashing=none",

b. 如果是Mac或者是Linux， package.json中添加，这样可以将几个js文件打包成一个js文件

cat dist/hello-angular-elements/{runtime-es2015,polyfills-es2015,main-es2015}.js > all.js

c. 如果是windows，则在dist文件夹目录下使用git bash 命令：

cat {runtime,polyfills,main}.js > revised-search.js

5. 这样在新项目中就可以直接引入revised-search.js, 并且使用<revised-search></revised-search>标签了.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <base href="">
        <title>element test</title>
        <link rel="stylesheet" type="text/css" href="styles.css"/>
    </head>
    <body>
        <revised-search class="revisedSearch"></revised-search>
        <script type="text/javascript" src="revised-search.js"></script>
    </body>
</html>

 

 

注意事项：

1. 一定要在app.module.ts中引入translate.service

 

export class AppModule {
    constructor(
    injector: Injector,
    private translateService: TranslateService
    ) {
      translateService.setDefaultLang('en');
      
      const RevisedSearchElement: any = createCustomElement(RevisedSearchComponent, { injector });
      customElements.define('revised-search', RevisedSearchElement);
    }
    ngDoBootstrap() {}
   }

 

posted @ 2022-05-03 17:27  jahoon  阅读(344)  评论(0)    收藏  举报