Как вызвать метод для углового веб-компонента (пользовательский элемент) - PullRequest
Новая
       34

Как вызвать метод для углового веб-компонента (пользовательский элемент)

0 голосов
/ 14 октября 2018

Я создал угловой веб-компонент, как показано ниже 

@Component({
  selector: 'dlx-slider',
  templateUrl: './slider.component.html',
  styleUrls: ['./slider.component.scss'],
  encapsulation: ViewEncapsulation.Native,
})
export class SliderComponent implements OnInit {

  open() {
    console.log('open');
  }

  close() {
    console.log('close');
  }

}

, и в моем модуле приложения 

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

  ngDoBootstrap() {
    this.defineElement(SliderComponent, 'dlx-slider');
  }

  private defineElement(component: any, elementName: string) {
    const el = createCustomElement(component, { injector: this.injector });
    customElements.define(elementName, el);

  }
}

все работает нормально, и я встроил его в простую страницу HTML, напримерниже 

<head>
    <meta charset="utf-8">
    <title>TMIBot</title>
    <base href="/">

    <meta name="viewport" content="height=device-height, width=device-width, initial-scale=1.0, user-scalable=no">

    <title>Test Angular Elements</title>
    <link rel="stylesheet" href="https://urltomy/dist/dlx-styles-1.0.css">
</head>

<body>
    <button id="button">Open Slider </button>
    <dlx-slider id="slider"></dlx-slider>
    <script type="text/javascript" src="https://urltomy/dist/dlx-chatbot-1.0.js"></script>
</body>
</html>

Теперь я хочу вызвать для него метод open.Я не могу найти способ для этого 

 <script>
        const button = document.querySelector('#button');
        button.addEventListener('click', () => {
            console.log('button Click');
            const slider = document.querySelector('#slider');
            console.log(slider);
            slider.open();
        });
    </script>

Ответы [ 2 ]

0 голосов
/ 09 ноября 2018

Я столкнулся с той же проблемой с вами.Использование сеттера, как в примере выше, не работает.Но если вы добавите @Input () в свой установщик, вы можете вызвать этот установщик для вызова вашего метода. 

@Component({
  selector: 'slider',
  templateUrl: './slider.component.html',
  styleUrls: ['./slider.component.css'],
  encapsulation: ViewEncapsulation.None
})
export class SliderComponent implements OnInit {
  @Input()
  set open(state:string) {
    doOpen();
  }

  @Input()
  set close(state:string) {
    doClose();
  }

  doOpen() {
    console.log('open');
  }

  doClose() {
    console.log('close');
  }
}

Ваш клиентский код JavaScript должен быть следующим: 

<script>
    const button = document.querySelector('#button');
    button.addEventListener('click', () => {
        console.log('button Click');
        const slider = document.querySelector('#slider');
        console.log(slider);
        // Call open method
        slider.open = 'open';
        // Call close method
        slider.close = 'close';
    });
</script>

Такжеесли вы хотите получить асинхронные данные для вашего метода и поместить их в любое свойство, вы можете получить ChangeDetectorRef из конструктора и вызвать ChangeDetectorRef.detectChanges метод.Если вы этого не сделаете, компонент html не знает никаких изменений в свойстве.

0 голосов
/ 14 октября 2018

Setter и Getter могут давать возможность вызывать метод.

В файле ts 

      set state(state:string) {
        console.log("state changed ", state);
      }

      get state() {
        return "IN"; 
      }

Вызвать атрибут set для вызова метода установки openState. 

<script>
        const button = document.querySelector('#button');
        button.addEventListener('click', () => {
            console.log('button Click');
            const slider = document.querySelector('#slider');
            console.log(slider);
            //slider.open();
             setTimeout(() => {
           slider.setAttribute('state', 'OUT');
           }, 1000);
        });
    </script>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...