Question

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

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

该对象不支持此操作

到目前为止我所做的：

删除由ng add @angular/elements添加的自定义元素的polyfill（不适用于IE）
将所有Angular软件包更新为7.2.1
将以下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';

手动引导模块
ng build --output-hashing=none并将所有生成的文件打包到btn-element.js中的http-server中，以进行本地测试（请参见下面的 index.html ）。 / p>

我想念一个特定的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);
  }
}

index.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>，但没有成功。

编辑： Minimal Example

在IE 11中似乎没什么作用。要重现我的结果，并与在Chrome中运行StackBitz一样，请执行以下步骤：

复制到本地计算机
运行npm install
运行npm run build && npm run package:win（对于Windows）
使用index.html服务btn-element.js和生成的http-server

Answer 1

从official document中我们可以看到：

许多浏览器当前都支持最近开发的自定义元素Web平台功能。支持正在等待中或计划在其他浏览器中使用。

我还尝试测试官方文档中包含的演示，它在Chrome浏览器中运行良好，而不在IE / Edge浏览器中运行。

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

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

Answer 2

我也遇到类似的问题，即视图值不会在ie11（自定义元素）中更新：

online demo

counter.component.ts

export class CounterComponent implements OnInit {

  @Input() counter: number;
  @Output() counterChange = new EventEmitter<number>();

  constructor() { }

  ngOnInit() {
  }

  add() {
    this.counter++; // <-- It's working but the view not update in ie11
    this.counterChange.emit(this.counter); // <-- It's working
  }

}

index.html

...
    <cea-counter counter="50"></cea-counter>
    <script>
      var component = document.querySelector('cea-counter');
      component.addEventListener('counterChange', function (event) {
        console.log('事件值 :', event.detail);
      });
    </script>
...

Github存储库：custom-element-angular

Answer 3

我在一个小项目中工作。这是需要检查的地方的清单。

要在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中的任何“浏览器填充”功能
请勿在{{1}}中使用任何会转译的内容，例如角构建配置的脚本或custom-elements-es5-adapter.js

使用Angular 9进行上述操作，使我具备了运行Angular Element并从中发出事件的一切所需。

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

Angular Elements输出在IE11中不起作用

3 个答案: