* ngIf异步管道角度与另一个observable合并
发布时间:2020-12-17 17:47:34 所属栏目:安全 来源:网络整理
导读:请给我一些关于我的应用程序的解决方法的想法!我试图在我的组件中动态切换模板,但有奇怪的行为.谢谢!这是 stackblitz 基本上我想要的是:我想从我的警报组件中的服务接收异步数据(节点),并在我的#initTemplate中显示此数据(节点),然后我想获取此数据的id(
请给我一些关于我的应用程序的解决方法的想法!我试图在我的组件中动态切换模板,但有奇怪的行为.谢谢!这是
stackblitz
基本上我想要的是:我想从我的警报组件中的服务接收异步数据(节点),并在我的#initTemplate中显示此数据(节点),然后我想获取此数据的id(节点),用此发送请求id并获取我希望在#stylesTemplate中显示的其他数据(样式). 我的问题是什么? 我需要切换组件的模板而不会消失. 这是我的简化警报组件(另见stackblitz工作样本) class AlertComponent implements OnInit,OnDestroy { private subscription: Subscription; message: any; node$: Observable<{}>; styles$: Observable<{}>; constructor(private dataService: DataService) { } activeInit: boolean = true; ngOnInit() { this.node$= this.dataService.getAsyncData().pipe(share()); this.styles$= this.node$.pipe( mergeMap(node => { if(!!node) { // I need node here,because getSecondAsyncData send request with this data return this.dataService.getSecondAsyncData(node); } else return of(null); })); } ngOnDestroy() { } openSecond() { this.activeInit = false; } openFirst() { this.activeInit = true; } close() { this.dataService.sendNodeToSubscribe(null); } 这是我的html与两个模板: <ng-container *ngTemplateOutlet="activeInit ? initTemplate : stylesTemplate"></ng-container> <ng-template #initTemplate> <div class="card left-settings position-fixed" *ngIf="(node$| async) as node;"> <div class="row justify-content-end mx-0"> <div class="col-0"> <button type="button" class="btn btn-block btn-ghost-light p-1 px-2" (click)="close()">Close</button> </div> </div> <div class="row custom-width"> <div class="col-lg-12"> <button (click)="openSecond()">switch second template</button> </div> </div> </div> </ng-template> <ng-template #stylesTemplate> <div class="card left-settings position-fixed" *ngIf="(styles$| async) as styles;"> <div class="row justify-content-end mx-0"> <div class="col-0"> <button type="button" class="btn btn-block btn-ghost-light p-1 px-2" (click)="close()"> Close </button> </div> </div> <div class="row custom-width"> <label>{{styles.isIcon}}</label> <label>{{styles.radius}}</label> <button (click)="openFirst()">switch first template</button> </div> </div> </ng-template> 谢谢 !! 解决方法
你只需要替换下面的代码,
使用BehaviorSubject:BehaviorSubject包含一个值.订阅时,它会立即发出值.主题没有值. private subject = new Subject<any>(); 同 private subject = new BehaviorSubject(new String()); 这里是更新Stackblitz 更新!! 谢谢!!不错的建议,这工作正常,但我需要在收到真实数据之前隐藏我的组件.为此,我修改了你的解决方案,现在我用它: private subject = new BehaviorSubject(null); (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |