Question

我有两个Angular组件app-image-input和app-button。我在模板中使用app-button进行app-image-input输入，如下所示。

AppButtonComponent

appButton.html

<button type="button" (click)="buttonClicked.emit()">{{label}}</button>

appButton.ts

@Component({
  selector: 'app-button',
  templateUrl: './appButton.html'
})
export class AppButtonComponent {

  @Input()
  label : string

  @Input()
  enabled : boolean

  @Output()
  buttonClicked = new EventEmitter()
}

AppImageInputComponent

appImageInput.html

<div class="take-photo">
  <span>Photo</span><input type="file" accept="image/*" capture>
</div>

<hr class="hr">

<div class="inner">
    <app-button class="submit" label="Submit" (buttonClicked)="submitClk()"></app-button>
    <app-button label="Cancel" (buttonClicked)="cancelClk()"></app-button>
</div>

AppModule

app.module.ts

// ..... imports go here.

@NgModule({
  declarations: [AppButtonComponent, AppImageInputComponent],
  entryComponents: [AppButtonComponent, AppImageInputComponent],
  imports: [
    FormsModule,
    BrowserModule,
  ],
  providers: [],
  bootstrap: []
})
export class AppModule { 
  ngDoBootstrap() {
  }

  constructor(injector: Injector) {
    Array.from(new Map<Type<any>, string>([
      [AppButtonComponent, 'app-button'],
      [AppImageInputComponent, 'app-image-input'],
      ]), ([key, value]) => {
      customElements.define(value, createCustomElement(key, {injector}))
    })
  }
}

问题我将我的应用程序打包为角度元素，并在原始HTML / JS应用程序中使用。我遇到的怪异行为与我使用图像输入组件的方式有关。

如果执行以下操作，则会得到预期的图像组件。

<body>
  <app-image-input></app-image-input>
</body>
</html>

但是，当我执行以下操作时，按钮会重复。

<body>
  <script>
    setTimeout(() => {
      var elem = document.createElement("app-image-input");
      document.body.appendChild(elem);
    }, 1000);
  </script>
</body>
</html>

请注意，将超时设置为大约400（而不是1000）毫秒可以提供正确的输出！

您可以找到完整的项目here。

还要https://stackblitz.com/edit/angular-4mgv3c，感谢Caramiriel

Answer 1

如上所述，它呈现为Angular组件，也呈现为Web组件。因此，您会看到两次。只需使用与应用程序选择器不匹配的自定义元素名称，即可决定是呈现自定义元素版本还是Angular组件版本。

角度6：为什么子组件模板渲染两次？

1 个答案: