angular8
Null_Bugs
这个作者很懒,什么都没留下…
展开
-
Angular8 移动端顶部导航demo
子组件:html<ul> <li *ngFor="let item of menus;let ind = index;"> <a href="#" (click)="handelSelected(ind)" [ngStyle]="{'color' : currentTab===ind ? titleActiveColor : titleColor...原创 2019-08-21 15:52:20 · 395 阅读 · 0 评论 -
angular8 路由初步
路由是什么路由(导航)本质上是切换视图的一种机制。路由的导航的URL是否真实存在angular的路由借鉴了大家熟知的浏览器URL变化导致页面切换的机制angular是单页程序,路由显示的路径不过是一种保存路由状态的机制,这个路径在web服务器上不存在。父组件<router-outlet></router-outlet>路由定义定义路由数组:路...原创 2019-09-03 13:57:25 · 601 阅读 · 0 评论 -
angular8 管道
管道的作用就是在视图上提供便利的值变换的方法。{{obj | json}}{{date | date : 'MM-DD'}}{{price | currency : 'CNY':'symbol':'4.0-2'}}app.module.tsimport localZh from '@angular/common/locals/zh-Hans';import { regi...原创 2019-09-04 10:10:47 · 499 阅读 · 0 评论 -
angular8 依赖注入
提供服务:@Injectable()标记为可供注入的服务模块中声明:providers 数组或者import对应模块在组件中使用构造函数中直接声明Angular框架帮你完成注入https://github.com/yyk316507/angualr8-demo...原创 2019-09-04 15:00:37 · 424 阅读 · 0 评论 -
angular8 脏值检查
什么是脏值检查?当数据改变时更新视图(DOM)什么时候会触发脏值检查?浏览器事件(如click,mouseover,keyup等)setTimeout()和setInterval()HTTP请求如何进行检测检查两个状态值:当前状态和新状态import { Component, OnInit, NgZone } from '@angular/core';...原创 2019-09-16 15:39:14 · 1136 阅读 · 0 评论 -
angular8 http请求
https://www.getpostman.com 下载postman在编辑器中搜索rest.client插件新建一个rest.http的文件@baseUrl = https://jsonplaceholder.typicode.comGET {{baseUrl}}/posts HTTP/1.1###POST {{baseUrl}}/POST HTTP/1.1C...原创 2019-09-18 15:10:06 · 4954 阅读 · 0 评论 -
angular8 拦截器
首先 新建一个文件夹叫interceptors,在该文件夹下建一个文件叫param.interceptor.ts,输入ng-http-interceptor创建import { Injectable } from '@angular/core';import { HttpEvent, HttpInterceptor, HttpHandler, HttpRequest} fro...原创 2019-09-18 16:46:45 · 1213 阅读 · 1 评论 -
angular8 管道和async
/* subscribe 是异步方法 */import { Component, OnInit, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';import { ImageSlider, Channel } from 'src/app/shared/components';import { Acti...原创 2019-09-23 10:35:45 · 1387 阅读 · 0 评论 -
angular8 倒计时
componentimport { Component, OnInit, Input } from '@angular/core';import { Observable, interval } from 'rxjs';import {takeWhile, map, tap } from 'rxjs/operators';@Component({ selector: 'app-c...原创 2019-09-24 16:09:09 · 927 阅读 · 0 评论 -
angular8 滚动多个图片加文字组件
子组件html<div class="container" [ngStyle]="{ 'grid-template-rows': templateRows, 'grid-template-columns': templateColumns}" (scroll) ="handleScroll($event)" > <ng-conten...原创 2019-09-02 14:32:51 · 323 阅读 · 0 评论 -
angular8 指令的样式和事件绑定
指令可以理解为没有模板的组件,它需要一个宿主元素推荐使用方括号 [] 指定Selector,使它变成一个属性html<div appGridItem *ngFor="let item of channels"> <img [src]="item.icon" alt="" [appGridItemImage]='"4rem"' [fitMode]="'non...原创 2019-08-29 17:02:33 · 948 阅读 · 0 评论 -
angular8 模块
什么是模块模块就是提供相对独立功能的一组代码模块的组成部分可以有:组件,指令,服务,管道等从某种角度说,它像一个小型的应用@NgModule 注解·declarations 数组:模块拥有的组件、指令或管道。注意每个组件/指令/管道只能在一个模块中声明。providers 数组 : 模块中需要使用的服务exports数组 :暴露给其他模块使用的组件、指令或管道等。...原创 2019-08-28 11:57:41 · 244 阅读 · 0 评论 -
angular8项目需要的东西
vs的推荐扩展 Debugger for Chrome Path Intellisense Angular files Angular Language Service Angular 8 Snippets-typeScript一站式开发框架 模块 服务 组件 路由 表单 响应式开发删除rm -fr pinduoduong new pinduoduo...原创 2019-08-22 10:17:50 · 323 阅读 · 0 评论 -
angular8指令
1.for循环变量的引用范围 索引的获取 第一个和最后一个 奇和偶 提升性能(trackBy:trackElement)trackBy:menu ? menu.title : null<li *ngFor="let item of items;let i = index;let first =first;let last =last;let odd = odd;let...原创 2019-08-22 10:20:09 · 600 阅读 · 0 评论 -
angular8 封装组件
组件封装的意义和方法 需要重用,或者简化逻辑ng generate component组件名 (驼峰模式)使用index.ts方便导入以及隔离内部变化对外部的影响ng g c 组件名(驼峰模式)如果想在某个文件夹下新建组件 ng g c 文件名/组件名(驼峰模式)在每一个文件夹下新建一个index.ts 引用每一个组件里export * from ...原创 2019-08-22 10:32:05 · 1437 阅读 · 0 评论 -
angular8 样式绑定的几种方式
[ngStyle]="{'background-color':backgroundColor}"注意:父组件引用的时候 外层记得加个引号 否则会以为是变量[backgroundColor]='"#ccc"'或者backgroundColor='orange'...原创 2019-08-22 10:33:09 · 2119 阅读 · 0 评论 -
angular8的组件的生命周期
constructor 构造函数永远首先被调用ngOnChanges 输入属性变化时被调用 (在组件的 '@Input' 属性发生变化的时候调用)ngOnInit 组件初始化时被调用ngDoCheck 脏值检测时调用 (会调用多次)ngAfterContentInit 当内容投影ng-content完成时调用ngAfterContentChecked Angula...原创 2019-08-22 10:33:53 · 1257 阅读 · 0 评论 -
angular8的内容嵌套
在父组件引用的子组件里面加<div>内容嵌套</div>在子组件中添加<ng-content></ng-content>原创 2019-08-22 10:34:59 · 310 阅读 · 0 评论 -
angular8 模板在组件类中的引用
<div #helloDiv>你好</div>export class AppComponent { @ViewChild('helloDiv') helloDivRef : ElementRef;} ngOnInit() { console.log("初始化",this.helloDivRef ) this.helloDivRef .n...原创 2019-08-22 10:36:12 · 695 阅读 · 0 评论 -
angular8的双向绑定
<input [value]= "username" (input)="username = $event.target.value"/>ngModelFormsModule 中提供的指令使用[(ngModel)] = "变量" 形式进行双向绑定[(ngModel)] = "username" (ngModelChange) = "username = $eve...原创 2019-08-22 11:32:07 · 2274 阅读 · 0 评论 -
angular8 页脚
footer.component .html<app-horizontal-grid [cols]='5' [displayCols]='5'> <div appGridItem *ngFor="let item of tabItem; let idx = index;"> <img [src]="idx === selectedIndex ? ...原创 2019-09-25 17:48:52 · 409 阅读 · 0 评论