Невозможно отобразить несколько компонентов в приложении для единственной страницы (Angular)

Question

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

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

App.component.html:

 Speed: {{value}}
  app-gauge /app-gauge

Gauge.component.ts

export class GaugeComponent implements OnInit {
  public value$: Observable<number>;
  ngOnInit() {
    this.value$ = interval(1000).pipe(
      map(() => Math.random() * 120)
    );

Должен появиться индикатор и начать генерировать / показывать случайные числа (ссылка на руководство, которому я следовал: http://www.wayneparrott.com/add-a-realtime-gauge-to-your-angular-project/)

Answer 1

Судя по вашим комментариям, кажется, что ваш компонент отображается, но value не меняется в вашем HTML.Причина этого в том, что вы используете Observable для выдачи случайных значений через каждые 1 с, поэтому для того, чтобы это работало, вам необходимо подписаться на этот Observable, который в данном случае равен value$.Вы можете подписаться на него, используя async pipe.

Также есть код, который необходимо изменить.Вы определяете свой Observable в gauge.component.ts, но вы получаете к нему доступ в app.component.html

Переместите свой код с guage.component.ts на app.component.ts

Ваш app.component.ts должен выглядеть следующим образомэто:

export class AppComponent implements OnInit {
  public value$: Observable<number>;
  ngOnInit() {
    this.value$ = interval(1000).pipe(
      map(() => Math.random() * 120)
    );

Теперь измените ваш app.component.html на что-то вроде этого:

Speed: {{ value$ | async }}
  <app-gauge> </app-gauge>