Question

我想在没有本地变量引用的情况下在引导弹出窗口中动态传递值。在下面的代码中，我使用了“ 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 -->

Answer 1

也许import { isAndroid } from "platform"; import { ListViewEventData } from "nativescript-ui-listview"; public ngOnInit() { this.eventsgps.mobile_eventgetbyclientidActed0().subscribe( evgpsbyclientid0 => { this.evgpsbyclientid0 = evgpsbyclientid0; } ); } templateSelector(item: any, index: number, items: any): string { return item.expanded ? "expanded" : "default"; } onItemTap(event: ListViewEventData) { const listView = event.object, rowIndex = event.index, dataItem = event.view.bindingContext; dataItem.expanded = !dataItem.expanded; if (isAndroid) { listView.androidListView.getAdapter().notifyItemChanged(rowIndex); } }可以在这里为您提供帮助。众所周知，Angular已经在后台使用它。使用RxJS中的RxJS是绝对安全的。 Subject可以将更改多次广播给多个侦听器，并且可以从Angular应用程序中的任何位置进行订阅。

要实现此目标，可能是您需要将Subject html代码移至另一个新组件，然后在infoModel中创建一个Subject并在{{1}中进行订阅}组件，只要AppComponent，就使用infoModel方法通过localTitle组件发送给订户，而无需初始化其他变量或模型弹出窗口。

更多信息：http://reactivex.io/rxjs/manual/overview.html#subject

在Angular 6中显示动态引导弹出内容

1 个答案: