Как получить переменную компонента в Angular 8 веб-компонентов - PullRequest
Новая
       4

Как получить переменную компонента в Angular 8 веб-компонентов

0 голосов
/ 06 мая 2020

Я использую Angular веб-компоненты в версии 8. Я хотел бы получить доступ к свойству компонента из индекса. html. Вот что у меня есть;

Есть компонент, у которого есть свойство с именем componentNames 

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-component-name-provider',
  templateUrl: './component-name-provider.component.html',
  styleUrls: ['./component-name-provider.component.css']
})
export class ComponentNameProviderComponent implements OnInit {

  public componentNames: string[] = [];

  constructor() { }

  ngOnInit() {
    this.componentNames = ['name1', 'name2'];
  }
}

У меня есть index. html, который я хотел бы получить свойство componentNames (упомянутое выше) отсюда. 

<app-component-name-provider></app-component-name-provider>
<script>
    const el = document.querySelector('app-component-name-provider');
    el.componentNames // here I tried to perform but did not work, el is null
</script>

Я также удаляю app.module.ts, если он необходим; 

import { Injector, NgModule } from '@angular/core';
import { createCustomElement } from '@angular/elements';
import { FormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { ComponentNameProviderComponent } from './component-name-provider/component-name-provider.component';

@NgModule({
  declarations: [
    ComponentNameProviderComponent
  ],
  imports: [
    BrowserModule,
    FormsModule
  ],
  providers: [],
  bootstrap: [],
  entryComponents: [
    ComponentNameProviderComponent
  ]
})
export class AppModule {
  constructor(private injector: Injector) {
  }

  ngDoBootstrap() {
    const componentNameProviderComponentCustomElement = createCustomElement(ComponentNameProviderComponent, { injector: this.injector });
    customElements.define('app-component-name-provider', componentNameProviderComponentCustomElement);
  }
}

Я пытался объясните, что я. Я ищу способ получить свойство componentNames из index. html. Как я пробовал выше, я не могу получить переменную, получив document.querySelector

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

Есть ли какое-нибудь решение по моему вопросу? Спасибо за помощь и вклад.

1 Ответ

0 голосов
/ 07 мая 2020

Вы можете использовать @ViewChild, чтобы получить свойство componentNames. Вы должны добавить localReference к своему компоненту, как показано ниже. 

<app-component-name-provider #testName></app-component-name-provider>

@ViewChild('testName', {static:true}) testName;

  ngAfterViewInit() {
    console.log(this.testName); // you will get your component properties here
  }

Ссылка на ответ: https://stackblitz.com/edit/angular-ubzhfd?file=src%2Fapp%2Fapp.component.ts

...