Angular Свойство пользовательского элемента @input не инициализируется? - PullRequest
Новая
       22

Angular Свойство пользовательского элемента @input не инициализируется?

0 голосов
/ 15 апреля 2020

Я создал пользовательский элемент / веб-компонент и это ссылка на репозиторий компонентов

Компонент выглядит следующим образом: 

import { Component, Input, ViewChild, ElementRef, AfterViewInit, ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'fs-gist',
  template:`
    <iframe #iframe type="text/javascript" width="100%" frameborder="0" style = "height:inherit"></iframe>
  `,
  styleUrls: [],
  encapsulation: ViewEncapsulation.ShadowDom
})

export class FsGistComponent implements AfterViewInit {
  @ViewChild('iframe') iframe:ElementRef;
  @Input() gistId;
  @Input() file:string;

  ngAfterViewInit() {
    console.log(this.gistId)
  }
}

Он встроен запустив npm run p, и веб-компонент fs-gist скопируется в этого проекта , запустив npm run cp. В проекте wc-test веб-компонент уже скопирован.

Когда я пытаюсь использовать его, запустив ng serve -o в этом проекте, свойство gistId не инициализируется.

Элемент объявляется так: 

<fs-gist gistId="fireflysemantics/054716730103cd205c39167054542f68"></fs-gist>

Для свойства gistId элемент просто записывает undefined. Любые идеи?

Это работает в этой демонстрации Stackblitz с ViewEncapsulation.Emulated:

https://stackblitz.com/edit/angular-custom-elements-hello-emulated

Angular CLI Issue Report

https://github.com/angular/angular-cli/issues/17476

...