Angular
Angular使用总结
沐风拂千渔
90后一枚,更多请关注[静阅茶馆]
展开
-
Angular +Ionic修改日期组件英文按钮
Angular +Ionic修改日期组件英文按钮1,引入日期组件: <ion-list> <div class="alert-price"> <ion-datetime displayFormat="YYYY-MM-DD" name ="endDate" [(ngModel)] ="endDate" ></ion-datetime> <ion-原创 2020-12-10 14:30:08 · 213 阅读 · 0 评论 -
Angular +Ionic使用ngModel绑定非文本框报错问题
一,报错当ngMode绑定在非input标签上时,会出现以下报错,然后页面加载不同步: <b [(ngModel)]="item.integralRecord"*ngIf="!add">+</b>二,解决方法给标签元素中加入:ngDefaultControl <b [(ngModel)]="item.integralRecord" ngDefaultControl *ngIf="!add">+</b>...原创 2020-12-08 10:31:47 · 260 阅读 · 0 评论 -
Angular +Ionic调用第三方接口跨域问题
一.跳转第三方接口,项目中常常会遇到的一些跨域问题。比如:调用第三方的支付接口,地图,等。还有就是从一个app或者H5跳转另一个app页面。常常会遇到一些跨域问题:问题1:接口报错500,错误显示为:这时候就需要在proxy.config.json文件中去设置:允许跨域。{ "/api": { "target": "https://zzz.qqq.com", "changeOrigin": true, "pathRewrite": { "^/api原创 2020-10-28 11:32:09 · 742 阅读 · 0 评论 -
Angular +Ionic关于token拦截报错
Angular +Ionic关于token拦截报错一,报错内容二,解决方法1,判断token情况 if(token){ if (urlList.indexOf(url) === -1) { console.log(token) customerHeaders['Authorization'] = token; // customerHeaders['token'] = token; //customerHeaders['QZH_TOKEN']原创 2020-10-26 17:25:07 · 251 阅读 · 0 评论 -
Angular +Ionic实现支付功能
Angular +Ionic+axios实现第三方支付功能1.下载axiosnpm install axios -s2.axios.service.ts配置import { Injectable } from "@angular/core";import axios from "axios"@Injectable({ providedIn: "root"})export class AxiosService { constructor() { } AxiosPos原创 2020-10-22 17:24:55 · 477 阅读 · 0 评论 -
Angular +Ionic中数组对象遍历之trackBy唯一标识
一,trackBy作用:1,标记被更改的节点2,页面刷新时重绘该更改的节点二.代码<li *ngFor="let item of arrList; trackBy: trackById"">{{ item }}</li>trackById(index, item) { return item.id; // 与项目对应的唯一id}...原创 2020-10-09 15:54:35 · 396 阅读 · 0 评论 -
Angular +Ionic实现获取数字验证码登录
简单项目中,一般会用到验证码登录。一.实现需求:验证码配合用户密码进行登录验证。甭管它是短信验证码,数字验证码,还是图形拼图验证码。今日简短小结数字验证码。二,关键代码1,html中 <div class="item"> <ion-label>验证码</ion-label> <ion-input placeholder="请输入验证码" clearInput maxlength="4" [(ngModel)]="login原创 2020-09-30 16:14:31 · 764 阅读 · 2 评论 -
Angular +Ionic实现收藏夹的全选和单选删除功能
Angular +Ionic实现收藏夹的全选和单选删除功能一,需求及解决思路1.实现需求:所展示的产品,通过编辑功能切换复选,分为单独选择和全选实现将商品从收藏夹中移除。2.解决思路:实现商品数据渲染页面后,调用执行删除功能的接口。实现单选,反选,全选。通过选中所接收的值拼接成自符串。取消选择时:将相应选中的字段从当前自符串中移除。点击删除按钮实现选中商品的移除。全选时则移除所有的商品。二,代码a,关键代码1,html//单选 <ion-checkbox *ngIf="s原创 2020-09-28 10:39:36 · 451 阅读 · 0 评论 -
Angular +Ionic实现关注与取消关注
Angular +Ionic实现关注与取消关注1.html中:<div class="middle-rate-shop-name" *ngIf="isShowContent"> <div class="middle-rate-shop-name-img" > <img [src]="shopInfoList.storeLogo"> </div> <div class="middle-rate-sho原创 2020-09-25 11:33:51 · 116 阅读 · 0 评论 -
Angular +Ionic实现增加,删除,编辑,修改功能。
常用的开发中,前端项目主要负责数据的表层处理。更多主要数据业务逻辑实际操作是在后端,主要体现在数据的增删改查业务逻辑及其数据库的操作上。今日简单罗列一下前端项目中数据表层的增删改查功能:一,增,改1.html中:<ion-header> <div class="bill-header"> <div class="bill-header-title"> <div class="bill-header-icon" (click原创 2020-09-21 11:54:50 · 794 阅读 · 0 评论 -
Angular +Ionic复选框实现单选多选功能
一,html中: <ion-content> <ion-list class="my-tracks-content"> <ion-list class="my-tracks-details" *ngFor="let item of collectionLists"> <!-- <img [src]="advImage.pictureUrl"> --> &原创 2020-09-18 14:42:00 · 740 阅读 · 0 评论 -
Angular+Ionic 中:ngIf,ngSwitch, ngStyle,ngClass,ngModel的使用总结:
一,ngIf1.可实现两种状态的切换<ion-content class="bill-message" *ngIf="!setBill"><ion-content>2.效果二,ngSwitch1,可据数据分情况展示:html中: <a>发票类型:</a> <ion-text [ngSwitch]="item.invoiceType"> <span *ngSwitchCase="1"&g原创 2020-09-18 14:23:03 · 670 阅读 · 2 评论 -
Angular +Ionic常用ng命令
一,创建项目node环境:NodeJs1.安装脚手架 npm install -g @angular/cli //失败卸载 npm uninstall -g @angular/cli2.淘宝镜像:npm install -g cnpm --registry=https://registry.npm.taobao.orgnpm cache clean //清除缓存3.初始化ng -v4.创建项目ng new filenamecd filenamecnpm in原创 2020-09-17 10:09:08 · 594 阅读 · 0 评论 -
Angular +Ionic实现父子组件传值
1,创建子组件ng generate component components/rating-star或ng g c components/rating-star创建组件2,配置组件3,引用组件4,父子组件传值1>父传子 @Input()接收//父组件引入 OnInit import { Component, OnInit } from '@angular/core';//父组件 data: any = '我是传往子组件的值'//子组件引入OnInit, In原创 2020-09-14 11:32:41 · 361 阅读 · 0 评论 -
Angular遍历JSON对象及获取数据踩坑
一,ts中 personObj:any;//接收传入数据 objectKeys = Object.keys;二,html中<div class="comments-cell" *ngFor="let key of objectKeys(personObj)"> <div class="cell-top"> <div class="top-date"> {{personObj[key].orderTime}}原创 2020-09-11 11:35:54 · 1034 阅读 · 0 评论 -
Angular+Ionic使用ion-popover组件
项目开发中常用的一些ionic组件比较有趣,今天简单的说一下Angula中ion-popover组件的使用1,在/src/app/share/components/popover的路径下使用指令创建组件:popover生成2,在src/app/share/components下的components.module.ts文件下加入组件import { NgModule } from '@angular/core';import { CommonModule } from '@angular/c原创 2020-09-09 13:50:14 · 1039 阅读 · 2 评论 -
Angular+Ionic使用queryParams实现跳转页传值
Angular+Ionic使用queryParams实现跳转页传值最近,在做电商项目,项目中需要实现:点击编辑按钮,跳转页面完成添加地址,修改地址功能。使用到angular传参,简单做一总结:1,发送界面ts //编辑地址 EditorAddress(item) { console.log("选中的地址"); console.log(item); this.router.navigate(['/editor-address'], { queryParams: item原创 2020-09-04 11:25:30 · 540 阅读 · 0 评论 -
Angular+Ionic开发steps步骤条组件
angular项目中需要step步骤条组件1,实现效果2.angular项目中需要step步骤条组件,找了一遍,没发现可用的。类似于vant里的step:vant里的step但是angular中使用不了,于是找到以下方法。原文链接...转载 2020-09-01 13:33:27 · 540 阅读 · 0 评论 -
Angular+Ionic实现夜间模式哦
1,html中 <div class="personal-datail-top-null" [ngClass]="finished ? 'loadFail' : 'loadBg' "> <ion-content> 文中内容 </ion-content> <div class="middle-order-title"><span>开启夜间模式</span></div> <ion-toggle原创 2020-08-24 13:05:50 · 261 阅读 · 0 评论 -
Angular+Ionic实现搜索的历史记录功能(浏览器记录)
Angular+Ionic实现搜索的历史记录功能(浏览器记录)1,html中<!--搜索框内容 --><div class="header-search-input"> <input type="text" id="research" placeholder="搜索商品" [(ngModel)]="inputTypes" (keyup)='getTypes($event)' (click)="onTauch()">原创 2020-08-24 12:46:34 · 581 阅读 · 0 评论 -
Angular+Ionic数据加载中,消息提示方法
Angular+Ionic数据加载中,消息提示方法1,加载中效果2,ts中引入配置import { ToastController, LoadingController, NavController,AlertController } from '@ionic/angular';export class SetUpPage extends UserInfo implements OnInit {constructor( private loadingCtrl: LoadingCont原创 2020-08-19 10:34:53 · 411 阅读 · 0 评论 -
Angular+Ionic组件弹框,跳转,及返回方法
Angular+Ionic组件弹框,跳转,及返回方法在使用ionic和angular的过程中,用到了一些ionic的组件及其angular的插件,这里简单作一下总结,方便下次使用:1,实现带确认取消的效果2,ts文件中,引入AlertControllerimport { ActivatedRoute, Router } from '@angular/router';import { RestService, StorageService, AppService } from '../../se原创 2020-08-19 10:12:17 · 820 阅读 · 0 评论 -
Angualr +Ionic监听回车键输入文本实现搜索
1,html 添加keyup,绑定inputContent <ion-input class="shop-search" type="text" [(ngModel)]="inputContent" (keyup)='getVal($event)' (click)="clearInput()"> </ion-input>2,ts中引入ElementRefimport { Co原创 2020-08-10 13:41:02 · 767 阅读 · 1 评论 -
Angular+Ionic...文本超域省略
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题,有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能,丰富你的文章UML 图表FLowchart流程图导出与导入导出导入欢迎使用Markdown编辑器你好! 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Mar原创 2020-08-07 17:32:49 · 264 阅读 · 3 评论 -
Angular+Ionic路由传值实现分类搜索
Angular+Ionic路由传值实现分类搜索1,发送页面文件中,路由绑定待传的值 <li *ngFor="let item of selectedClassList" [routerLink]="['/product-reclassify',item.categoryId ,item.name]" (click)="changeTadId(item)">原创 2020-08-04 15:32:37 · 244 阅读 · 0 评论 -
Angular+ionic列渲数据实现单独选中折叠效果
1,html中<section *ngFor="let item of getshopList"> <ion-item> <div class="middle-content-order"> <div class="middle-order-icon"> <ion-icon name="chevron-up-outline" class="up-gray" item-right *n原创 2020-07-30 13:37:35 · 227 阅读 · 0 评论 -
Angular+ionic实现折叠展开效果
1,html中 <ion-item> <div class="middle-content-order"> <div class="middle-order-icon"> <ion-icon name="chevron-up-outline" class="up-gray" item-right *ngIf="!isShow" (click)="isShow=!isShow">原创 2020-07-28 17:05:20 · 841 阅读 · 0 评论 -
Angular+ionic评分组件的引用
一,封装组件1,rating-star.component.html中<div class="rating_container"> <ng-container *ngFor="let num of [1, 2, 3, 4, 5]"> <ion-icon name="star" *ngIf="num<=rating;else:Half" color="warning" (click)="changeNum(num)" [ngClass]="{'m原创 2020-07-28 10:26:54 · 377 阅读 · 0 评论 -
ionic4 使用多级联动选择器滑动点击报错解决方法
1,错误ionic4 使用多级联动选择器参考:https://blog.csdn.net/rimuweinuan_/article/details/103615670?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromBaidu-6.nonecase&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromBaidu-6.nonec原创 2020-07-23 11:18:56 · 469 阅读 · 1 评论 -
Angular+ionic实现退出功能
Angular+ionic实现退出功能1,html中 <div class="delivery-address-content-footer" (click)="logoutConfirm()"> <span>退出当前账户</span> </div>2,ts中引入AlertControllerimport { ToastController, LoadingController, NavController,AlertContr原创 2020-07-22 13:42:16 · 435 阅读 · 0 评论 -
Angular+ionic制作可滑动的卡片
Angular+ionic制作可滑动的卡片一,html中 <section class="shop-detail-top"> <div class="shop-detail-top-message" scrollX="true"> <li *ngFor="let item of promotion" [routerLink]="['/product-details']" routerLinkActive原创 2020-07-10 09:53:27 · 390 阅读 · 0 评论 -
Angular+ionic实现页面滑动搜索框背景色渐变
Angular+ionic实现页面滑动搜索框背景色渐变实现功能:页面滚动,搜索框背景由透明变白色ts中添加监听事件 // 监听滚动条 resizeHeader(event){ console.log(event) var _header = document.getElementById("detailNavBar"); let _opacity = event.detail.scrollTop / 235; if(_opacity > 1) {原创 2020-07-08 13:40:36 · 277 阅读 · 0 评论 -
Angular+ionic4分类菜单添加不同样式
Angular+ionic4分类菜单添加不同样式一,给遍历过来的分类菜单添加不同样式html中 <section class="shop-item-types"> <ion-grid > <ion-row> <ion-col class="item-list" size="3" *ngFor="let item of cellimgs"> <div class="shop-ite原创 2020-07-07 10:25:56 · 271 阅读 · 0 评论 -
Ionic+Angular实现自动轮播功能
Ionic+Angular实现自动轮播功能html页面 <section class="shop-swipe" > <ion-slides pager="true" loop="true" speed="5000" pager="true" autoplay="true" spaceBetween="0" direction="vertical" effect="slide" zoom="true" #slide> <ion-slide *原创 2020-07-06 10:15:36 · 386 阅读 · 0 评论