ionic中@ViewChild配合ng-zorro-mobile里modal的使用

最新推荐文章于 2021-11-23 18:02:25 发布

Imency

最新推荐文章于 2021-11-23 18:02:25 发布

阅读量453

点赞数

文章标签： typescript 前端

本文链接：https://blog.csdn.net/Imency/article/details/103734059

版权

@ViewChild的用法

一、 @ViewChild的用法

在ts中

@ViewChild('xianssfTemplate', {static: true})
    xianssfTemplate: TemplateRef<any>;

2.html 配合模板其中xianssfTemplate模板是modal的内容，修改的地方使用 [(ngModel)]双向绑定

<ListItem multipleLine [extra]="shifang">
                        <span style="float: left">线索无跟进自动释放天数</span>
                        <div class="cross" style="display: inline;margin-right: 0px;float: right;"
                             (click)="shfiang()">
                            <span style="float:left;"> 大于{{guizszData.xianszdsfValue}}天释放线索</span>
                        </div>
                    </ListItem>
                    <ng-template #xianssfTemplate>
                        <InputItem
                                [content]="'大于'"
                                [(ngModel)]="guizszData.xianszdsfValue" [extra]="'天释放线索'"></InputItem>
                    </ng-template>
                    <ng-template #shifang>
                        <Switch (onChange)="xiansuo($event)"
                                [checked]="guizszData.xianszdsfValue|dict:([{name: true, value: 1}, {name: false, value: 0}])"></Switch>
                    </ng-template>
 </ListItem>

在这里插入图片描述

3.弹出modal框

记得注入 constructor(private modal: ModalService) {
}

 shfiang() {
        this.modal.alert('温馨提示', this.xianssfTemplate, [
            {text: '取消', onPress: () => this.modal.close()},
            {
                text: '确定', onPress: () => {
                }
            }
        ]);

    }

4.如图

在这里插入图片描述