Показывать динамический загрузочный контент во Angular 6 - PullRequest
Новая
       30

Показывать динамический загрузочный контент во Angular 6

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

Я хочу динамически передавать значение во всплывающем окне начальной загрузки без ссылки на локальную переменную.В приведенном ниже коде я использовал «localTitle», и он работает нормально, но я не хочу инициализировать все переменные, потому что их слишком много.Есть ли способ, которым я могу динамически заменять переменные в html, передавая функции?

С google я наткнулся на различные темы с примерами $ scope, которые не работали для меня в Angular 6.

Ниже приведен код для app.component.html и app.component.ts.А вот и рабочая демоверсия: https://stackblitz.com/edit/vjangular-popup 

export class AppComponent  {
  name = 'Angular';
  infoModalRef: BsModalRef;
  localTitle = 'hi';
  myList = ["one","two","three"];

constructor(private modalService: BsModalService) { }

  showInfoPopup(template: TemplateRef<any>, userName) {
    this.localTitle = "Title for =>"+userName;
    this.infoModalRef = this.modalService.show(template);
    // this.infoModalRef.componentInstance.title = userName;
  }
  hideInfo() {
    this.infoModalRef.hide();
  }

}
<div *ngFor="let list of myList">
		<a class="text-primary" (click)="showInfoPopup(infoModal, list);">
			Click for popup {{list}}
    </a>
	</div>


<!-- Modal start -->
<ng-template #infoModal>
	<div class="modal-content modified_modal">
		<div class="modal-header">
			<span class="m-auto">Additional Information</span>
        </div>
        <div class="modal-body">
          <div class="modal-inner">
            {{localTitle}}
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-green btn-border m-auto" data-dismiss="modal" (click)="hideInfo();">Close</button>
        </div>
    </div>
  </ng-template>
  <!-- Modal end -->

1 Ответ

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

Может быть, RxJS может помочь вам здесь.Как мы знаем, Angular уже использует это под капотом.Совершенно безопасно использовать Subject от RxJS.Subject может передавать изменения несколько раз нескольким слушателям и может быть подписан из любого места в приложении Angular.

Для этого может потребоваться переместить infoModel HTML-код в другой новый компонент, затем создать Subject в вашем AppComponent и подписаться на него в вашем infoModel компоненте всякий раз, когда localTitle, просто отправьте подписчику в компоненте infoModel, используя метод subjectName.next(localTitle), без инициализации других переменных или всплывающего окна Model.

Для получения дополнительной информации: http://reactivex.io/rxjs/manual/overview.html#subject

...