7

我尝试让 Angular Elements 在 IE11 中工作。我的自定义元素（简单按钮）已经显示并且输入绑定按预期工作，但输出绑定没有。

在 IE 11 中单击我的自定义元素按钮会导致错误：

该对象不支持此操作

到目前为止我做了什么：

  1. 删除添加的自定义元素的 polyfill ng add @angular/elements（在 IE 中无法正常工作）

  2. 将所有 Angular 包更新为7.2.1

  3. 将以下 polyfillls 添加到polyfills.ts：

import 'core-js/shim'
import '@webcomponents/shadydom/shadydom.min.js';
import '@webcomponents/custom-elements/src/native-shim';
import '@webcomponents/custom-elements/custom-elements.min';

  1. 手动引导模块

  2. ng build --output-hashing=none并将所有生成的文件打包到btn-element.js其中http-server供本地测试使用（参见下面的index.html）。

我错过了特定的 polyfill 还是我做错了什么？还是现在还不可能？

app.module.ts：

@NgModule({
  declarations: [ ButtonComponent ],
  imports: [ BrowserModule ],
  entryComponents: [ ButtonComponent ]
})
export class AppModule {
  constructor(private injector: Injector) {
    const customBtn = createCustomElement(ButtonComponent, { injector });
    customElements.define('app-btn', customBtn);
  }
  ngDoBootstrap() { }
}

button.component.ts：

@Component({
  template: `<button (click)="handleClick()">{{ label }}</button>`,
  encapsulation: ViewEncapsulation.ShadowDom
})
export class ButtonComponent {
  @Input() label;
  @Output() myaction = new EventEmitter<number>();
  private clicksCt: number = 0;

  constructor() { }

  handleClick() {
    this.clicksCt++;
    this.myaction.emit(this.clicksCt);
  }
}

索引.html

<html lang="en">
<head>  
  [...]
  <script type="text/javascript" src="btn-element.js"></script>
</head>
<body>
<app-btn label="Button Text"></app-btn>

<script>
    var button = document.querySelector('app-btn');
    button.addEventListener('myaction', function (event) {
         console.log('action emitted: ' + event.detail);          <!-- not working! -->
     });
     setTimeout(function () {
         button.label = 'Async value change happened...'   <!-- working! -->
     }, 2000);
    }
</script>
</body>
</html>

我也试过<app-btn label="Button Text" (myaction)="test($event)"></app-btn>没有成功。

编辑： 最小示例

在 IE 11 中似乎没有工作。要重现我的结果并查看 StackBitz 在 Chrome 中运行的结果，请按照以下步骤操作：

  1. 复制到本地机器
  2. 跑npm install
  3. 运行npm run build && npm run package:win（对于 Windows）
  4. 服务index.html和生成btn-element.js的http-server
4

2 回答 2

0

我有这个在一个小项目中工作。这是需要到位的事情的清单。

要在 IE11 中运行 Angular Elements，您需要：

  • 将您的 Angular 应用程序编译为 ES5 和生产标志
  • 包含 Polymer 项目webcomponentsjs/custom-elements-es5-adapter.js以使 ES5 语法与现代浏览器中的 customElements API 一起使用
  • 包含 Polymer 项目 web 组件 polyfill webcomponentsjs/webcomponents-loader.js https://www.webcomponents.org/polyfills/
  • 确保它们与 Angular 代码的顺序正确
<script type="text/javascript" src="dist/AngularComponentTest/runtime.js"></script>
<script type="text/javascript" src="dist/AngularComponentTest/polyfills.js"></script>
<script src="webcomponentsjs/custom-elements-es5-adapter.js"></script>
<script src="webcomponentsjs/webcomponents-loader.js"></script>
<script type="text/javascript" src="dist/AngularComponentTest/main.js"></script></body>
  • polyfills.ts要加载一个简单的组件，您不需要启用任何“Browser Polyfill”
  • 不要包括custom-elements-es5-adapter.js使用任何意味着它被转译的东西，例如 Angular 构建配置的脚本或polyfill.ts

使用 Angular 9 完成上述操作为我提供了运行 Angular Element 并从中发出事件所需的一切。

稍微清理一下后，我将发布一个示例应用程序。

于 2020-02-28T15:08:27.280 回答
0

从官方文档中我们可以看出：

最近开发的自定义元素 Web 平台功能目前在许多浏览器中得到原生支持。其他浏览器的支持正在等待或计划中。

在此处输入图像描述

我也尝试测试官方文档包含的demo，它在Chrome浏览器中运行良好，在IE/Edge浏览器中无法运行。

在 IE 浏览器中会显示语法错误，如下所示：

在此处输入图像描述

因此，正如官方文档所说，他们正在努力实现自定义元素以支持 IE/Edge 浏览器。

于 2019-01-23T09:25:02.183 回答