Угловой 6: почему шаблон дочернего компонента отображается дважды? - PullRequest
Новая
       12

Угловой 6: почему шаблон дочернего компонента отображается дважды?

6 голосов
/ 22 июня 2019

У меня есть два угловых компонента app-image-input и app-button. Я использую app-button в шаблоне для ввода app-image следующим образом.

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>

enter image description here

Однако, когда я делаю следующее, кнопки дублируются. 

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

enter image description here

Обратите внимание, что установка времени ожидания около 400 (вместо 1000) миллисекунд дает правильный вывод !!

Вы можете найти полный проект здесь .

Также https://stackblitz.com/edit/angular-4mgv3c благодаря Карамириэль

...