一、引言我们使用ngx-loading，需要在app.component.html上写模板，绑定一个布尔值loading.此时如果我们想在其他组件中使用这个loading控件，就需要在每个组件的html重新写模板，这就显得累赘了。在此，我们以ngx-loading为例，展示子组件如何通过service改变app组件中的布尔值loading。 // app.component.html<ngx-loading [show]="loading" [config]="{ backdropBorderRadius: 14px }"></ngx-loading> 二、实现1.安装ngx-loading...
项目使用的Angular版本是V6.0.3安装Swipernpm install swiper --save或者 yarn add swiper --save在angular.json文件添加swiper.js和swiper.cssangular.json安装模组定义档npm install @types/swiper --save或者 yarn add @types/swiper --save配置tsconfig文件tsconfig.jsontsconfig.app.json 按照上面的配置完成后，angular里就可以用swiper。下面是一个小demo。 test.component.html<div class="swiper-container"><div class="...
在开发中遇到date过滤器失效的问题，在其他页面date过滤器没有问题，但是在这个页面出现了问题，后来发现是因为{{now | date : 'yyyy-MM-dd HH:mm:ss'}} now必须是时间戳格式的，后面的过滤器才会生效。而我从后端传过来的时间数据是字符串所以过滤器无法生效 解决方法：在后端处理要传的数据，将里面的时间转为时间戳即可（下面贴我百度到的）/*** 时间转时间戳*/public static String dateToStamp(String s) throws ParseExcepti...
在angular6.0使用教程：angular主从组件章节我们介绍了父组件向子组件传递数据，当时是在同一个页面传递数据的。而本章的angular数据传递将是在不同页面间的传递，即list组件页面向post组件页面传递数据。 第一步：配置post组件的路由： 在上一章angular6.0使用教程：angular6.0的路由使用中我们为angular6.0项目设置了路由，我们只设置了home组件和list组件的路由。我们还要设置post组件的路由，因为post是产品组件，而不同的产品...
前面的文章我们介绍过angular6.0的数据绑定，也就是前面页面如何调用后台的数据，我们接触到了调用普通数据——如：调用产品详情{{post.content}}。在使用中，我们会发现，如果按原来的方式angular6.0调用的数据是HTML字符串，前台页面显示的依然是html字符串，而没有正常显示，如下图：这显示不是我们想要的结果。那么，angular6.0如何调用HTML字符串数据呢？ angular6.0提供了一个属性绑定来实现html字符串数据的绑定： <ul [inn...
本文实例讲述了AngularJS实现动态切换样式的方法。分享给大家供大家参考，具体如下： AngularJS相比原生的js或者jquery有着很大不同，对于一个简单的鼠标点击不同选项，动态切换样式该怎么实现呢。 本文实现的是点击某个标题，标题字体加粗，并随之切换相应的div内容，如下（点击推荐或热点）Ok.，实现过程 1. html代码 <!--推荐或热点标题--> <div class="comTitStyle"><div><a ng-click="titleClick(0)" ng-class="{selected:foc...
package.json这个文件列出了项目所使用的第三方依赖包。我们在创建新项目的时候默认会给我们下载一些包，这些是Angular自带的，存放在node_modules目录中。 需要注意的是： package.json中有dependencies对象和devDependencies。 devDependencies 里面的插件只用于开发环境，不用于生产环境，而 dependencies 是需要发布到生产环境的。添加依赖有2种方法： npm install name –save 就是将要安装的依赖写到package.json的dependenc...
为什么要封装呢？angular4自身提供的请求方法是用Observable来实现的。用的是观察者模式，个人认为这用来写请求是非常方便的。 一个项目里会有非常多的不同的请求，但是其实每个请求都会有些共性。比如：每个请求都要传Authorization，比如每个请求都要先判断后台返回的status字段为200时才是请求成功，后台正真返回的数据在data字段里，比如对于错误信息的处理都是一样的......等等。 所以我们需要封装出一个请求，去统一处理这些...
本文介绍了Angular操作cookies方法，分享给大家，具体如下：var setCookie = function(name, value) {var Days = 30;var exp = new Date();exp.setTime(exp.getTime() + Days * 24 * 60 * 60 * 1000);document.cookie = name + "=" + escape(value) + ";expires=" + exp.toGMTString();//$cookies[name] = value;}; 这是用Javascript写的方法去设置 var getCookie = function(name) {var arr, reg = new RegExp("(^| )" + name + "...
一般情况我们在使用WebApi之类的技术时，都会遇到跨域的问题，这个只需要在服务端做一下处理即可。如果这些GET或POST请求不需要传递Cookie数据的话，就没什么问题了，但如果需要，那么会发现 虽然已经处理了跨域请求的问题，但后台始终无法获取到Cookie。 跨域传输Cookie是需要后台和前台同时做相关处理才能解决的。 就好比一个握手会话，前台先表示，我的跨域请求是带有Cookie的；请求到了服务端，服务端表示可以接收跨域Cookie，...
很多时候，我很喜欢angular的编码风格，特别是angular支持typescript之后，完整的生命周期，完美的钩子函数，都是别的语言所无法替代的。这里我来说说我自己的网络请求封装，某种意义上来说，angular自己的网络请求封装的很好的，我们没有必要再来画蛇添足，但是，可能是我有那么一点点的代码洁癖吧，喜欢自己的风格样式，所以就有了这一点多余的东西。 Angular的网络请求这里是angular自己的网络请求。 url代表网络请求地址，para...
做一个Web应用，一般都有前台和后台，Node.js可以实现后台，利用jade模板引擎也可以生成一些简单的前台页面，但要想开发出具有实际意义的现代Web应用，还得搭配一个Web前端框架。 AngularJS是一个JavaScript前端框架，对于Node.js来说是一个完美的客户端库。AngularJS强制使用MVC（模型-视图-控制器，Model-View-Controller）框架，而它又使用JavaScript对象作为它的模型，和Node.js特别般配，用AngularJS的某些服务（比如$http）和...
网上的文章和教程基本上写到组件加载完成就没了！没了？！而且都是只能存在一个dialog，想要打开另一个dialog必须先销毁当前打开的dialog，之后看过 material 的实现方式，怪自己太蠢看不懂源码，就只能用自己的方式来实现一个dialog组件了 Dialog组件的目标：可以同时存在多个Dialog，可销毁指定Dialog，销毁后html中无组件残留且提供回调 动态加载组件的实现方式有两种，angular4.0版本之前使用ComponentFactoryResolver来实现，...
使用 Angular 请求数据的时候，需要引入 HttpModule 模块，如果使用的 jsonp 模式的话，则需要另外引入 JsonpModule 模块 import { HttpModule, JsonpModule } from @angular/http然后在当前模块中的 imports 内进行注册 imports: [HttpModule,JsonpModule ], 注册以后就可以在组件文件当中引入相对应的方法来进行数据请求了 import { Http, Jsonp } from @angular/http 然后在当前组件的构造函数当中进行注入以后就可以使用了 con...
本文介绍了Angular5 路由传参，一共3种方法。分享给大家，具体如下： 1.问号后面带的参数，获取参数的方式：ActivatedRoute.queryParams[id] 例如：/product?id=1&name=iphone还可以是： [ routerLink]= "[/books]" [ queryParams]= "{bookname:《活着》} 代码：html <h4>Messages</h4> <p>Total:{{msgs.total}}</p> <div *ngFor="let item of msgs.data"><b>{{item.name}}</b>:<a [routerLink]="[/next,item.id]" [queryParams]="...