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

Angular中@ViewChild与ModalService详解

最新推荐文章于 2025-05-28 08:15:06 发布

原创最新推荐文章于 2025-05-28 08:15:06 发布 · 530 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#typescript #前端

本文深入探讨了Angular框架中@ViewChild装饰器的使用方法，通过具体示例展示了如何在组件中引用子组件，并结合ng-zorro-mobile库中的InputItem和Modal对话框组件，实现了弹出模态框进行数据编辑的功能。文章详细介绍了如何注入ModalService并调用其alert方法来展示模态框，以及如何在模态框中应用双向数据绑定。

@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.如图

在这里插入图片描述