Angular
AldarLin
不积跬步,无以至千里
展开
-
Angular 路由和传值
一、路由和传值跳转和传值<ul> <li *ngFor="let item of list;let key=index;"> <a [routerLink]="['/newscontent']" [queryParams]="{aid:key}">{{key}} --- {{item}}</a> <...原创 2019-11-14 15:58:24 · 166 阅读 · 0 评论 -
Angular Rxjs异步请求和http请求
一、异步请求异步请求有三种方式:1. 回调函数获取异步数据 2.Promis获取异步数据 3. Rxjs获取异步数据1.1 回调函数获取异步数据通过函数传递,并在回调函数中调用这个函数的方式实现回调,但逻辑结构不够清晰,整个过程无法对他进行额外操作,且容易造成回调地狱。request.service.ts// 用callback方式 getCallback...原创 2019-11-14 14:16:55 · 2089 阅读 · 0 评论 -
Angular 父子组件传值,非父子组件传值
一、子组件调用父组件,父组件给子组件传值引入Inputheader.component.tsimport { Component, OnInit, Input, Output } from '@angular/core';@Component({ selector: 'app-header', templateUrl: './header.component.html',...原创 2019-11-13 22:39:24 · 1023 阅读 · 0 评论 -
angular ViewChild
ViewChild 用于操作dom树元素,或是对操作子组件一、操作dom元素先用#xxx来标记dom元素news.component.html<div #myBox> 我是一个dom节点</div>引入ViewChild,用@ViewChild绑定一个变量。nativeElement是真实的dom节点news.component.ts...原创 2019-11-13 15:27:10 · 211 阅读 · 0 评论 -
Angular 服务和数据持久化
由于组件之间难以通用,故可以调用服务1. 新建服务器ng g service Service/storage2. 引入服务import { StorageService } from '../Service/storage.service'3. 初始化constructor(public storage:StorageService) { let s = thi...原创 2019-11-13 14:09:55 · 358 阅读 · 0 评论 -
Angular 双向数据绑定
在Angular中通过 [(ngModel)] 来实现数据的双向绑定要实现双向数据绑定,首先要引入 FormsModule模块import { SearchComponent } from './Component/search/search.component';import { BrowserModule } from '@angular/platform-browser';im...原创 2019-11-13 10:44:11 · 337 阅读 · 0 评论 -
Angular 表单提交
一、响应式表单提交1.1 使用 FormGroup实例1.1.1 在app.module.ts中引入ReactiveFormsModuleimport { ReactiveFormsModule } from '@angular/forms'1.1.2 创建表单<!-- 通过 ngSubmit 会监控这个表单发送出来的submit值 --><...原创 2019-11-11 09:12:26 · 1137 阅读 · 0 评论 -
Angular http
一、引用引用即使用前的准备,要使用http请求,根据mvc的模块设计,应该从model层入手,即在service中使用。1.1 在app.module.ts中导入HttpClientModule模块import { HttpClientModule } from '@angular/common/http';二、使用2.1 在service层中引入并使用ca...原创 2019-11-10 15:16:07 · 146 阅读 · 0 评论 -
Angular 管道
定义:先创建管道文件夹创建管道,这里是为了将number型的金额转为合适的显示查看ts:transform函数就是这个管道的处理函数了value: 外部传入管道的内容name、price:主动创建的传入的参数,可以多个在app.module.ts中声明:使用:传入的参数格式必须与定义的格式和数量严格配对。...原创 2019-11-10 14:40:34 · 183 阅读 · 0 评论 -
angular 基本命令
ng new my-project => 项目名ng serve 开启服务,之后可以http://localhost:4200 访问[attribute] 为属性绑定(click) 为事件绑定父子组件通信:和vue一样,都是用发射机制子组件中定义输入和输出@Input attr@Output nofity@Output show定义produc...原创 2019-11-10 14:32:33 · 211 阅读 · 0 评论 -
Angular 搭建本地开发环境,并在VSCode运行第一个Angular项目
本文将介绍如何在window环境Angular环境,并在VSCode上创建第一个Angular项目,并运行起来。一、 部署 Node.js 安装环境1.1 下载Node.js安装包1.2 安装Node.js环境1.3 验证是否安装成功1.4 配置环境变量二、 用VSCode运行Angular项目2.1安装VSCode2.2 打开VSCode终端,安装Angula...原创 2019-11-08 19:26:27 · 8592 阅读 · 3 评论