zoukankan      html  css  js  c++  java
  • angular2 模态框 即弹窗示例 一

    已安装完的请忽略 (此步骤参照  https://ng.ant.design/docs/getting-started/zh

    1、安装组件

      $ npm install ng-zorro-antd --save

    2. 导入模块

    import { NzModalModule } from 'ng-zorro-antd/modal'; (此模块为弹窗模块)
    import { NzButtonModule } from 'ng-zorro-antd/button'; (此示例应用了官方的按钮样式)
     

    3. 引入样式与 SVG 资源

    在 angular.json 文件中引入样式和 SVG icon 资源。

    "styles": [
        ...
        "node_modules/ng-zorro-antd/ng-zorro-antd.min.css"
      ]

    在 style.css 文件里:

    @import "~ng-zorro-antd/style/index.min.css"; /* 引入基本样式 */
    @import "~ng-zorro-antd/button/style/index.min.css"; /* 引入组件样式 */


    示例

    1.

     HTML代码

    <button nz-button [nzType]="'danger'" (click)="showModal()"><span>Show Modal</span></button>
        <nz-modal [(nzVisible)]="isVisible" nzTitle="The first Modal" (nzOnCancel)="handleCancel()" (nzOnOk)="handleOk()">
          <p>Content one</p>
          <p>Content two</p>
          <p>Content three</p>
        </nz-modal>
    <router-outlet></router-outlet>
    ts 文件

     ts代码

    import { Component } from '@angular/core';

    @Component({
      selector: 'app-root',
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.css']
    })
    export class AppComponent {
      isVisible = false;

      constructor() {}

      showModal(): void {
        this.isVisible = true;
      }

      handleOk(): void {
        console.log('Button ok clicked!');
        this.isVisible = false;
      }

      handleCancel(): void {
        console.log('Button cancel clicked!');
        this.isVisible = false;
      }
    }
  • 相关阅读:
    SDOI2016游戏
    李超线段树
    SDOI2016数字配对
    SDOI2016储能表
    ! JOISC2020DAY3星座3
    JOISC2020DAY2有趣的 Joitter 交友
    第十天学习内容 函数
    第九天学习内容 结构体
    第八天学习内容 集合
    第七天学习内容 数组
  • 原文地址:https://www.cnblogs.com/kukai/p/12228982.html
Copyright © 2011-2022 走看看