标签: angular-elements

我正在构建一个角度元素并将一些输入参数传递给它。我可以很好地传递一些字符串输入参数（ikrId 和环境工作得很好），但是很难通过角度元素将布尔值传递给 showTitle 输入属性（将 showTitle 属性从父角度组件传递给组件工作正常）。

这是组件片段：

export class MyComponent implements OnInit, OnDestroy {

  @Input() ikrId: string;
  @Input('environment') environment: IkrEnvironment = 'PROD';
  @Input('showTitle') showTitle = true;

这是我在普通旧 html 中使用它的方式：

<my-element environment="DEV" ikr-id="889fb69f-71a5-4881-8528-0b43a07599f0" show-title="false"></my-element>

但是节目标题没有传递到我的组件中，它总是正确的。

我在这里缺少什么？

谢谢！

我的团队处理多个角度项目。为了代码重用，我们将许多表示组件提取到库中，然后在我们的各种项目中使用它们。

那么，鉴于我们所有的项目都是基于 angular 的，而且我们已经使用了库，我们还能从 angular 元素中获得什么？

我开始研究元素的原因是：

我们的大部分旧项目都使用 Bootstrap 3。我们希望将 Bootstrap 4 与我们制作的新东西一起使用。所以我想知道一个元素是否可以用 Bootstrap 4 设计，并在用 B-3 设计的地方使用它而不会破坏？

那可能吗 ？

我最近开始使用角度V6发布的角度元素,我开了一个小沙盒项目. https://github.com/Slash7GNR/ndv-angular-elements 现在我试图向我的web组件添加一个更复杂的输入 - 我试图按如下方式添加数组输入:在app.component.ts中我添加了:

@Input() welcomeMessages: string[];

在我添加的模板中:

<div *ngFor="let message of welcomeMessages; let index = index">
    {{index}} - {{message}}
</div>

然后,我创建了一个静态html文件并添加了以下代码:(pls-wrk是由角元素功能生成的Web组件)

<pls-wrk></pls-wrk>
<script>
let arr = [“wow”,”wow2"];
let elementByTag = document.getElementsByTagName(‘pls-wrk’)[0];
elementByTag.setAttribute(“welcome-messages”, arr);
</script>
<script src="ndv-elements.js"></script>

我收到以下错误:

未捕获的错误:无法找到'string'类型的不同支持对象'哇,哇'.NgFor仅支持绑定到诸如Arrays之类的Iterables.

我也试过通过元素本身绑定数组,如下所示:

<pls-wrk welcome-messages=”[‘wow’,wow2']”></pls-wrk>

但这都不奏效.

我也试过绑定一个作为对象的输入,但我在html中看不到结果.

这里的任何人都可以成功地将数组/对象作为输入传递给角元素？

我刚刚使用Angular 6创建了我的第一个Web组件.一切正常,直到我尝试将Web组件集成到现有应用程序中:

集成了Web组件的应用程序(https://www.example.com):

<script type="text/javascript" src="https://component.example.com/html-imports.min.js"></script>
<link rel="import" href="https://component.example.com/element.html">
<my-web-component uuid="2342-asdf-2342-ffsk"></my-web-component>

我的Web组件index.html不包含base-href.

浏览器现在尝试加载Web组件的资源:

https://www.example.com/assets/i18n/de_CH.json

代替

 https://component.example.com/assets/i18n/de_CH.json

当我尝试在构建期间添加base-href时,会导致:

ng build --configuration=development --base-href https://component.example.com/

Cannot read property 'startTag' of null          
TypeError: Cannot read property 'startTag' of null
    at IndexHtmlWebpackPlugin.<anonymous> (/home/www-data/.../node_modules/@angular-devkit/build-angular/src/angular-cli-files/plugins/index-html-webpack-plugin.js:147:62)
    at Generator.next (<anonymous>)
    at fulfilled (/home/www-data/.../node_modules/@angular-devkit/build-angular/src/angular-cli-files/plugins/index-html-webpack-plugin.js:4:58)

任何帮助都非常感谢,我的想法已经不多了.

我开始接触角6位，并且对Angular Elements和新的库项目非常感兴趣。我有一个即将到来的项目，可能需要这两个新功能。

我需要创建可在Web框架之间重用的自定义UI组件，但我还希望获得在角项目中使用它们的一流支持。我已按照本教程进行操作，并拥有一个angular6应用程序，该应用程序注册自定义元素，并将webpack捆绑包合并到一个文件中。然后，我可以在纯HTML页面中使用该单个js文件，并且一切正常。

关键是在库项目中创建这些自定义元素会很棒。这样，我可以在内部npm注册表中分发我的库，以及构建包含所有自定义元素的js并将其部署在CDN上。

是否可以在新的库项目中构建Angular Elements？

我正在研究 Angular Elements 并考虑将我们的 Angular 组件生成为 Angular Elements，以便可以在 Angular 应用程序之外使用。

假设我有一个 Angular 4 应用程序，它导入两个不同的 Angular Elements（内置于 Angular 7）并将它们呈现在同一页面上，然后我在我的 Angular 4 组件中实例化一个服务。该服务包含我想传递到我的 Angular Elements 中的数据，因为 Web 组件只接受字符串作为属性（输入），有没有什么好的方法可以在服务实例之间共享数据/将服务实例传递到 Angular Elements 中？

我正在尝试将表单控件导出为 Angular 元素（Web 组件），并将其用作本机输入元素，以便它可以与 Angular 反应式表单或与本机 html 输入一起使用的类似库一起使用。

波纹管代码在作为模块中的角度组件导出时起作用。当我将它导出为 Web 组件并尝试以反应形式使用它时，我遇到了问题。

此代码是使用 Angular 7.1 框架编写的。

组件模板

<input ngDefaultControl value="value" />

组件代码：

@Component({
  selector: 'cns-text-input',
  templateUrl: './text-input.component.html',
  styleUrls: ['./text-input.component.scss'],
  providers: [ {
    provide: NG_VALUE_ACCESSOR,
    useExisting:  forwardRef(() => TextInputComponent),
    multi: true
  }]
})
export class TextInputComponent implements ControlValueAccessor,     AfterViewInit {

  @ViewChild(DefaultValueAccessor) valueAccessor:     DefaultValueAccessor;

  public ngAfterViewInit() {
    console.log('value accessor', this.valueAccessor);
    console.log(this);
  }

  public writeValue(obj: any): void {
    this.valueAccessor.writeValue(obj);
  }
  public registerOnChange(fn: any): void {
    this.valueAccessor.registerOnChange(fn);
  }
  public registerOnTouched(fn: any): void {
    this.valueAccessor.registerOnTouched(fn);
  } …

寻找有关如何使用可在其他浏览器上工作的 Angular Elements 的指南，尤其是 Internet Explore 11。

到目前为止，遵循使用 ngDoBootstrap 来定义自定义元素（Angular Element）的推荐约定。它仅适用于 Chrome，但在 IE 中，元素标签在 DOM 中可见，但在浏览器上不显示任何内容。架构如下：组件、服务、管道……都被分成模块。

然后使用 customElements.define() 定义一个父组件。一旦这在 DOM 中应用，诸如单击事件更改检测之类的操作就可以在 chrome（当前版本：72.0.3626.121）中很好地工作，但在 IE 中没有任何显示。我花了几个小时研究不同的方法让它在 IE 中工作。我查看了这里提供的一些问题和答案，特别是使用 polyfills 但没有成功。

然后，我尝试按照 parent > child 的顺序一次定义一个组件，但再次遇到了不同的问题，其中 IE 开始抛出脚本错误，其中一个特别是与 zone.js 和 vendor.js（但不是在 chrome 中）有关。这样做后，我能够看到该元素，但操作和更改检测不起作用。

我在这里尝试了这种方法，但后来开始遇到依赖注入错误。到目前为止，一个问题会导致另一个问题。

选择使用 AngularElements 的原因是尝试将其与使用不同技术堆栈编写的现有项目集成。

以下起点：

我们有一些有角度的前端微服务，现在我们希望将它们整合到一个应用程序中。我们正在尝试使用Angular-Elements方法，并且已导出其中一个产生了巨大的JS文件的微服务。

问题

当我们在“将其放在一起”项目中包含角度元素时，仅在dom中包含“ router-outlet”标签，而不会呈现任何html。

码

自定义元素：

app.module.ts：

        import {NgModule, Injector} from '@angular/core';

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

    import {PhoneModule} from "./features/phone/phone.module";
    import {createCustomElement} from '@angular/elements';
    import {Router} from '@angular/router';

    @NgModule({
      declarations: [
        AppComponent,
      ],
      imports: [
        AppRoutingModule,
        PhoneModule,
      ],
      entryComponents: [AppComponent],
    })
    export class AppModule {

      constructor(private injector: Injector, private router: Router) {
        this.router = router;
      }

      ngOnInit() {
        this.router.initialNavigation();
      }

      ngDoBootstrap() {
        const customElement = createCustomElement(AppComponent, {injector: this.injector});
        customElements.define('phone-contracts', customElement);
      }
    }

app-routing.module.ts：

import …

我有一个升级到 angular 9 的 angular 应用程序，我在其中使用了 angular 元素，它也升级到了 angular 9。我有一个服务模块（angular 9），我正在我的 angular 应用程序中导入它。我的 angular 元素也导入了相同的服务。我希望在我的 angular 应用程序和 angular 元素之间共享该服务的单个实例。Angular 9 提供了新的服务注入选项，现在称为“平台”。根据角度文档https://next.angular.io/api/core/Injectable

'platform' ：页面上所有应用程序共享的特殊单例平台注入器。

我将我的服务更改为从根注入到平台级别。但我仍然看到我的服务的两个实例，一个在我的应用程序中，另一个在 angular 元素中。

@Injectable({providedIn: '平台' })

如何在我的应用程序和 angular 元素之间共享我的服务的单个实例。