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;
      }
    }
  • 相关阅读:
    详解CUDA编程
    卷积神经网络详解
    python操作Excel读写--使用xlrd
    pycharm启动慢 –xms -xmx相关参数设置
    pycharm开发python利器入门
    win10安装windows live writer 错误:OnCatalogResult:0x80190194
    curl 模拟请求
    Python AES_ECB_PKCS5加密代码
    如何让eclipse恢复默认布局
    eclipse中项目jdk1.8刷新下就变成1.5的解决办法
  • 原文地址:https://www.cnblogs.com/kukai/p/12228982.html
Copyright © 2011-2022 走看看