FlyWine的博客

Angular实现灵活的动态创建组件指令在某些场景下需要动态创建指令，但是不想每次都要写很多重复的代码，那么封装一个灵活的指令是比较好的方式。本文代码库已经在github上ngx-dyncmpstackblitz示例连接最终目标设计之前需要设想需要做成什么样子，支持哪些特性，下面是基本的特性：支持Input装饰器属性绑定，用于父组件向子组件传递值。支持Output装饰器属性绑定，用于父组件感知子组件的变化。支持各种组件类型的动态创建最终使用形式如：<ng-container

Angular动态创建组件什么是动态创建？一般来说就是组件不需要在html内定义，而是通过typescript来控制该组件的创建。往往我们大部分的时候都是在html内定义，之所以这样也能够创建出我们想要的组件，这是因为Angular框架在编译后或运行时会帮助我们创建这个组件并生成相应代码。Angular如何实现动态创建？Angular框架已经帮助开发者考虑到了这一点，并且已经把它做的相对简单易用，先看一下简单的例子。app.component.html文件<p> Angular

Angular实现图片点击缩放组件本文将设计一个用于网页中点击图片缩放的 Angular 组件。阅读需要注意的是，本文只讲解原理和设计理念，不过多讲解Angular框架的API。线demo。需求分析一般用户在阅读文章的时候，由于种种限制，图片会比较小，所以需要提供一个可以查看图片详细的控件，大概需求可以有以下几点：双击图像可以显示该图像的原始图或者放大后的图像图像可以移动，放大，缩小。再次双击后可以关闭自定义API参数（有一些图像的api支持图像的裁剪缩放等功能）复用性好，也就是在每个页

Angular模板高级使用使用ng-templateAngular自带一个叫做ng-template的组件，它允许我们声明Angular模板的任何部分。这是给我们的模板赋予动态性的一种很好的方式，让我们能够把我们的代码传递给其他组件。在app.component.html文件中写一个ng-template组件。<ng-template #hello> Hello, Worl...

Angular消息通知组件ngx-notificationIt is a flexible and usable component.DemoDemoInstallation1.You need install @flywine93/ngx-notification by npmnpm install @flywine93/ngx-notification --save2.You...

websocket心跳检测前后端架构本篇文章为初略架构websocket在前后端的心跳检测机制，实现相对毛糙。下面介绍内容参照 廖雪峰 的描述，为了切换页面麻烦，这里就直接挑简要的信息复制黏贴过来。廖雪峰 – WebSocket 教程。为什么需要 WebSocket？初次接触 WebSocket 的人，都会问同样的问题：我们已经有了 HTTP 协议，为什么还需要另一个协议？它能带来什...

Angular自动取消订阅RxJs在使用 rxjs 时我们经常忘记调用unsubscribe()而导致内存泄露，很多时候你很难发现它，在RxJs官方有这样一段话：What is a Subscription? A Subscription is an object that represents a disposable resource, usually the execution of ...

创建自定义Tabs组件-01此文章用于讲解如何封装一个自定义 Tabs 组件。一步一步了解如何封装自己想要的组件。构思想象一这个组件该如何使用？一定要站在使用者的角度，大致可能这样。<tabs> <tab title="Tab 1"> Tab 1 </tab> <tab title="Tab 2"> Tab 2 ...

Angular添加class的正确方式很多时候我们会遇到需要给元素增加或删除指定class，从而达到某种目的。那么在Angular中我们如何添加?className属性绑定我们可以通过HTML元素的className属性进行绑定：<div [className]="'demo-class'"></div>当然也可以通过表达式进行绑定：<div [clas...

Angular 9 新功能摘要Angular的9.0.0版本已经发布了!这是一个跨越整个平台的主要版本，包括框架、Angular Material、和Angular CLI。该版本将应用程序默认切换到Ivy编译器，并引入了改进的组件测试方法。这是Angular在过3年内对Angular做的最大更新之一，Ivy 的正式应用，就好比，忽如一夜春风来，千树万树梨花开。如何更新到Angular 9...

开发简化版NgFor下面是自定义实现一个简化版本的NgFor指令，一般来说使用Angular默认的即可，但是在追求高性能的时候，或许你需要这样一个简化版本的指令，让你的程序运行流畅、纵享丝滑。直接贴出代码。import {Directive, EmbeddedViewRef, Input, DoCheck, OnChanges, SimpleChanges, TemplateRef, Vie...

Angular实现dialog对话框封装为什么要封装？对于Angular Material UI库中的dialog组件，实在不是很好用，所以打算简单封装一下啊。直接代码吧。封装dialog组件1.创建一个dialog组件2.dialog.component.html文件<ng-template #dialog> <!-- 对话框投射内容 --> ...

Angular之jwt令牌身份验证demo https://gitee.com/powersky/jwt介绍Json web token (JWT), 是为了在网络应用环境间传递声明而执行的一种基于JSON的开放标准（(RFC 7519).该token被设计为紧凑且安全的，特别适用于分布式站点的单点登录（SSO）场景。JWT的声明一般被用来在身份提供者和服务提供者间传递被认证的用户身份信息，...

Angular之ngx-permissions的路由使用介绍现在，你准备开始与控制访问应用程序的状态工作。为了限制任何状态ngx-permission需要依靠 Angular Route 数据属性，通过permissions间接控制认证配置。Permissions对象接受以下属性：属性接受值onlyString|Array|FunctionexceptStri...

Angular之ngx-permissions的角色管理案例 demo https://stackblitz.com/edit/ngx-permissions-role介绍通过定义一个角色是一组指定的由特定用户组的鉴别能力（权限)。因此，例如用户或匿名的角色和权限不够。我们可以代表我们作为一组权限的角色应该是能够执行的用户角色。定义角色单个角色通过NgxRolesService的add...

Angular之ngx-permissions的管理权限介绍让我们开始先说说什么是权限？权限是指用户可以在应用程序中畅通无阻的能力，所以你要考虑你的程序需要那些权限，分别对应那一部分。注意：此库只适用于前端的简单防护，真正发挥作用的是后端，不仅仅要做好前端验证，后端更为重要！！！！否则你的web程序很容易被攻破。定义权限ngx-permissions 允许设置不同逻辑的 permi...

Angular权限管理之ngx-permissions的控制视图访问案例 demo https://stackblitz.com/edit/ngx-permissions-iwexsbPermission指令Permission模块将导出指令 ngxPermissionsOnly 和 ngxPermissionsExcept，它能够根据权限和角色控制元素的显示/隐藏。指令属性属性...

Angular权限管理之ngx-permissions的常见使用情况权限验证首先需要请求验证并通过，然后获得权限，最后检查权限。这种方式需要在Angular 4.3.2 版本以上才会有效工作。一般来说我们的程序有2个守卫，一个是信息验证，一个是权限守卫，并且一定是先请求信息验证，然后才是权限验证。例如下面的路由配置：let routes = [ { path: '', ...

Angular权限管理之ngx-permissions权限帮助您对路线的控制权，通过使用简单的概念，你来决定谁可以访问它们。安装安装这个第三方库：npm install ngx-permissions --save导入App Module导入import { BrowserModule } from '@angular/platform-browser';import { NgM...

Angular安装当然，在安装 @angular/cli 之前需要先把 Node.js 安装好，请到官方网站下载安装包 ，安装过程和普通软件没有区别。装好 Node.js 之后就可以安装 @angular/cli 了，由于 npm 会自动访问海外的服务器，因而强烈推荐使用 cnpm 进行安装：npm i -g cnpm --registry=https://registry.npm.taoba...

Angular Material 阴影使用依托于 Angular Material 库，可以直接使用通用的符合 Material Design 风格的阴影。使用使用方式有两种：外联样式设定，即在css或scss中设定通过class名称设定，即 元素的class名称方式一：外联样式使用在scss或css文件中导入@import '~@angular/material/them...

Angular 8之升级和新功能摘要Angular 8已经到来，并带来了大量的工作流程和性能改进。就像我们之前发布的几个版本一样，让我们回顾一下Angular 8的新功能，以及如何将Angular 7应用程序升级到Angular 8。Angular 8中明显的新功能数量有限，但确实还有一些好东西：Differential loading由于差异加载，您的Angular 8应用程序现在将...

Angular Render2 Renderer2类是Angular以service的形式提供的抽象，允许操作应用程序的元素而无需直接触摸DOM。这是推荐的方法，因为它可以更容易地开发可以在没有DOM访问的环境中呈现的应用程序，例如在服务器上，web worker，或者原生移动上。 需要注释的是，现在已弃用原始渲染器服务，而使用Renderer2。Basic Usage...

Angular深入理解基本组成在讲指令时，我们先来了解一下Angular的基本概念和结构。Module 模块Angular 是模块化的.Modules 导出 classes, function, values ， 以便在其他模块导入使用.angular应用由模块组成，每个模块都做此模块相关的事情组件、方法、类、服务等，他们都可以成为模块。基本使用：expor...

Angular Chart.js第三方库ng-chartjs基础使用项目github地址这个项目支持基本的Chart.js图表，并且支持内联插件和全局插件的使用。Demo地址支持图表类型linebarradarpiepolarArea安装npm install ng-chartjs --savenpm install chart.js --save导入正常导入模...

第一章、第一节 Angular基础让我们先来看看Angular是如何实现组件模式的。组件模式Angular 应用程序使用组件模式。你可能听说过这个模式，它不仅用于软件开发，还用于制造、建筑和其他领域。简单地说，它涉及到将更小的、离散的构建块组合成更大的成品。例如，电池是汽车的组成部分。在软件开发中，组件是逻辑单元，可以组合成更大的应用程序。组件往往具有内部逻辑和属性，这些逻辑和属性对较大的...

Angular Web App部署Linux Nginx Https 提示：这篇文章是基于内网的互联网就开始将 WEB 服务从 HTTP 迁移到 HTTPS，而现在为了更快的推进 HTTPS 的普及，Chrome 将从 2018 年 7 月起标记所有的 HTTP 网站为不安全链接。HTTPS 会逐渐成为 WEB 服务的标配，最最重要的是，它能给用户带来更安全、更好隐私保护的网络体...

Angular Web App部署Ubuntu Nginx当我们想发布Angular Web App的时候，我们想在开发的时候部署测试，那么这篇文章使用Nginx来部署我们的Angular系统环境lsb_release -aNo LSB modules are available.Distributor ID: UbuntuDescription: Ubuntu ...

Angular国际化方案 首先和大家推荐一个xlf文件的操作工具，支持合并和编辑功能，github，到release界面下载。对于Angular国际化，官方提供了i18n方案，也就是标签的方式，通过angular CLI来识别。国际化方案必须在编译前定义下来，所以不能动态翻译。也就是当有人切换语言时，Angular i18n强制您按照不同的语言构建应用程序。就目前来说，Angul...

Angular的NgModuleNgModule作为Angular模块的核心,也是组织者,官方有很长的文档来介绍他,包括每一个API。@NgModule文件的定义方式import { BrowserModule } from '@angular/platform-browser';import { NgModule } from '@angular/core';impor...

ngrx初识在使用之前需要安装ngrxnpm install @ngrx/store --save或者yarn add @ngrx/storengrx/store:保存了ReduxAPI的核心概念，使用RxJS扩展的Redux实现。使用可观察对象来简化了监听事件的订阅等操作。dispatch&amp;reducer&amp;statedispatcher,reduc...

Angular深入理解之指令指令有什么功能Attribute directives 属性指令Structural directives 结构指令自定义属性指令自定义结构指令Angular深入理解之指令对于初学Angular的同学来说，指令无疑是最痛苦的，那么我们怎么使用自定义的指令呢？指令到底怎么实现呢？为什么要写指令呢？首先我们先了解指定，然后通过自定...

深入理解Angular订阅者模式如果正在读此篇文章的你学过java,c++等面向对象语言，知道两个模式观察者模式和订阅者模式，分别为：Observer pattern，Pub-sub pattern(Subscriber)接下来我们结合Angular来说明这两个模式。Observer pattern This is a pattern of development in whi...

Anuglar中正确导入RxJS库目前Angular2中的已经内建支持RxJS，所以我们在使用的时候可以直接导入使用了。理解操作符导⼊在使用创建依赖于 RxJS 组件，服务，指令等等时， 你可能遇到处理运算符导⼊的问 题。 在项⽬中引⼊操作符最主要的⽅式像下⾯这样导⼊:import 'rxjs/add/operator/take';这会将导⼊的操作符添加到 Obser...

@Output与@Input理解Output和Input是两个装饰器，是Angular2专门用来实现跨组件通讯，双向绑定等操作所用的。@InputComponent本身是一种支持 nest 的结构，Child和Parent之间，如果Parent需要把数据传输给child并在child自己的页面中显示，则需要在Child的对应 directive 标示为 input。形如：...

前世今生Angular会管理一个组件的生命周期，包括组件的创建、渲染、子组件创建与渲染、当数据绑定属性变化时的校验、DOM移除之前毁销。Angular提供组件生命周期钩子便于我们在某些关键点发生时添加操作。组件生命周期钩子指令和组件实例有个生命周期用于创建、更新和销毁，开发者可通过 angular2/core 库实现一个或多个这些生命周期钩子接口，每个接口都有一个单独的钩子方法...

Angular_PWA使用+Demo什么是PWAPWA（Progressive Web App）利用TLS，webapp manifests和service workers使应用程序能够安装并离线使用。 换句话说，PWA就像手机上的原生应用程序，但它是使用诸如HTML5，JavaScript和CSS3之类的网络技术构建的。 如果构建正确，PWA与原生应用程序无法区分。PWA 的主要...

Angular6_PWAAngular正式发布了V6.0，我们已经可以利用对应的@angular/cli V6.0来直接开发PWA应用了。第一步：安装@angular/cli V6.0如果你机器上有老版本，请先卸载。打开你的终端，执行：npm install -g @angular/cli或cnpm install -g @angular/cli安装成功...

Angular性能优化之脏检测当我们在使用 Angular 框架搭建项目时，随着组件越来越多，页面也来越复杂，性能会越来越低，主要表现在 CPU 使用率 很高。所以我们要对项目做一定的优化。Angular脏检查（Change Detection）机制Angular 的脏检测主要是指 zone.js,这是一个开源的第三方库，github地址。关于 zone.js 的定义，官方解释为：A ...

Typescript实现单例之父类调用子类设计要求在程序中,需要一个对象可以全局使用,并且只有一个实例Breakpoint 类是一个可以被继承的类,然后子类必须实现 updateView函数updateView 这个函数可以被自动调用,当窗口发生变化的时候构思UML 图Layout 是一个单例类,也就是全局只能有一个对象。Breakpoint 是一个抽象类。实现...