Связывание угловых элементов @Input () в родительском компоненте - PullRequest
Новая
       6

Связывание угловых элементов @Input () в родительском компоненте

0 голосов
/ 07 сентября 2018

Я застрял на несколько часов с проблемой, которую не могу решить. Я создал компонент и упаковал его как файл js. Я хочу загрузить этот файл JS в другой проект. Пока все отлично работает. Но я создал Компонент с декоратором @Input (). Теперь, когда я добавляю свой пользовательский компонент в html другого проекта и передаю свойство @Input () напрямую, все равно все работает. Но я хочу, чтобы это свойство не передавалось непосредственно в HTML-файл, я хочу связать его в этом компоненте. Хватит говорить, давайте посмотрим, что я пока делаю, шаг за шагом

Установленные библиотеки и зависимости

npm i @angular/elements @webcomponents/custom-elements fs-extra concat --save

Импортированные скрипты 

"scripts":
[
"node_modules/@webcomponents/custom-elements/custom-elements.min.js",
"node_modules/@webcomponents/custom-elements/src/native-shim.js"
]

Созданный компонент

Машинописный файл 

@Component({
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})

export class AppComponent {
  @Input() subtitle: string;
}

HTML-файл 

<h1>Any Title<h1/>
<h4>{{subtitle}}</h4>

Зарегистрированный компонент в AppModule.ts

export class AppModule {constructor(private injector: Injector) {  }

ngDoBootstrap() {
  const widgetName = createCustomElement(AppComponent, {injector: this.injector});
  customElements.define('widget-name', widgetName);
}

Теперь я могу добавить этот пользовательский компонент в index.html и ng serve, и все будет работать.

У меня есть скрипт сборки, который связывает меня с компонентом в файл js. И это очень хорошо работает с этим фрагментом кода. Это то, что я добавил в другой проект.

Рабочий пример

<widget-name subtitle="Subtitle of this cmp"></widget-name>

Пример не работает

<widget-name [subtitle]="subtitle"></widget-name>

В соответствующий файл машинописи я добавил простое свойство в надежде, что оно будет связано со свойством subtitle @Input (). 

subtitle = 'Why it's not working?;

Я также пробовал разные привязки, но кажется, что источник привязки теряется, когда я добавляю пользовательский компонент в другой проект.

...