![](https://img-blog.csdnimg.cn/20201014180756754.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
typescript
勘察加熊人
这个作者很懒,什么都没留下…
展开
-
angular和for循环实现listview列表
用div+ts实现一个listview的列表原创 2022-08-12 18:25:52 · 569 阅读 · 0 评论 -
angular计时器切换图片和map存储
最近碰到一个需求,纯代码实现轮播图切换的功能,就是开启图片轮播循环和关闭图片轮播循环,可以控制图片切换秒数,把后端拿出来的数据,存储到map中,然后通过切换key,实现图片切换功能 ......原创 2022-08-11 18:16:19 · 470 阅读 · 0 评论 -
typescript冒泡排序,类型转换
import {Component, OnInit} from '@angular/core';@Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css']})export class AppComponent implements OnInit { title = 'untitled-intent'; price: string原创 2022-05-18 16:39:04 · 284 阅读 · 2 评论 -
ng仿登录弹窗
step1: D:\vue\router-ng-ui\src\app\shopping-list\shopping-list.component.ts 首页import {Component, OnInit} from '@angular/core';import {MatDialog, MatDialogRef, MAT_DIALOG_DATA} from '@angular/material/dialog';import {DialogOverviewExampleDialog} from '.原创 2022-05-13 11:39:53 · 208 阅读 · 0 评论 -
angular网络请求
step1: 网络请求,集成api D:\vue\nghttpdemo\src\app\services\cliente.service.tsimport {HttpClient, HttpHeaders, HttpClientModule} from '@angular/common/http';import {Injectable} from '@angular/core';import {Observable, catchError, throwError, map, tap} from原创 2022-05-06 19:38:36 · 1389 阅读 · 0 评论 -
angular简易switch选择按钮
angular简易switch选择按钮step1: D:\vue\untitled2905\src\app\app.component.tsimport { Component } from '@angular/core';@Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css']})export class AppCompone原创 2022-03-29 11:33:04 · 1159 阅读 · 0 评论 -
Angular简易轮播图
Angular简易轮播图step1: D:\vue\untitled2905\src\app\app.component.css.con_img{ position: relative; width: auto; height: auto;}.ms{ position: absolute; bottom: 5px; left: 0; width: 41%; height: 10%; color: white; background-color:gray;原创 2022-03-29 11:14:59 · 1944 阅读 · 1 评论 -
angular的封装与继承
angular的封装与继承面向对象的三大特征是继承、封装、多态。JavaScript可以模拟实现继承和封装,但是无法很好的模拟实现多态,所以我们说JavaScript是一门基于对象的语言,而非是面向对象的语言。当然在TypeScript可以实现多态,后面会有实例讲到。参考网址:https://github.com/Murphycx94/blog/issues/30step1: D:\vue\untitled2906\src\app\SomeClass.tsexport namespace App原创 2022-03-28 17:10:39 · 692 阅读 · 0 评论 -
angular定时器
import { Component } from '@angular/core';@Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css']})export class AppComponent { title = 'untitled2906'; select= 0;//页面对应抽奖下标 timer:any; ngO原创 2022-03-28 16:34:43 · 1069 阅读 · 0 评论 -
Angular生命周期
生命周期Angular从程序引导启动、再到创建与销毁组件动作都有一系列钩子事件,它允许我们在某个阶段有机会做点处理。名称说明范围constructor构造函数指令和组件ngOnChanges属性变更通知指令和组件ngOnInit组件初始化指令和组件ngDoCheck每一次变更检测时指令和组件ngAfterContentInit子组件初始化后组件ngAfterContentChecked子组件变更检测之后组件ngAfterV原创 2022-03-28 16:27:12 · 499 阅读 · 0 评论 -
Angular实现九宫格抽奖
Angular实现九宫格抽奖step1: D:\vue\untitled2906\src\app\app.component.css.sudoku_row{ display: flex; align-items: center; width:100%; flex-wrap: wrap;}.sudoku_item{ display: flex; justify-content: center; align-items: center; flex-direction: c原创 2022-03-28 15:20:06 · 253 阅读 · 0 评论 -
Angular动态切换css元素样式
Angular动态切换css元素样式第一种方式,切换不同的cssstep1: D:\vue\untitled3\src\app\app.component.css.show-true { background-color: red; color: white;}.show-false { color: white; background-color: blue;}step2: D:\vue\untitled3\src\app\app.component.html<原创 2022-03-28 12:28:03 · 1269 阅读 · 0 评论 -
Angular实现九宫格布局
Angular实现九宫格布局step1: D:\vue\untitled2905\src\app\app.component.css 九宫格布局.sudoku_row{ display: flex; align-items: center; width:100%; flex-wrap: wrap;}.sudoku_item{ display: flex; justify-content: center; align-items: center; flex-dir原创 2022-03-28 11:23:07 · 785 阅读 · 0 评论 -
Angular实现简单计算器
Angular实现简单计算器step1: D:\vue\untitled2904\src\app\app.component.tsimport {Component} from '@angular/core';@Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css']})export class AppComponent { t原创 2022-03-26 11:31:37 · 771 阅读 · 0 评论 -
Angular路由切换新增动画效果
Angular路由切换新增动画效果step1: 新增路由模块和新增5个组件ng generate module app-routing --flat --module=appng generate component app-layoutng generate component home ng generate component selfie ng generate component verify ng generate component documentati原创 2022-03-23 15:20:06 · 1647 阅读 · 0 评论 -
Angular动画组件封装
Angular动画组件封装step1: D:\vue\untitled2902\src\app\app.module.tsimport {NgModule} from '@angular/core';import {BrowserModule} from '@angular/platform-browser';import {AppComponent} from './app.component';import {BrowserAnimationsModule} from "@angular/原创 2022-03-22 10:02:39 · 276 阅读 · 1 评论 -
Angular使用animation动画
Angular使用animation动画step1: D:\vue\untitled2902\src\app\app.module.tsimport { NgModule } from '@angular/core';import { BrowserModule } from '@angular/platform-browser';import { AppComponent } from './app.component';import {BrowserAnimationsModule} f原创 2022-03-21 10:11:29 · 1453 阅读 · 0 评论 -
Angular使用Rxjs实现组件间通信
Angular使用Rxjs实现组件间通信step1: 添加服务 ng generate service data step2: D:\vue\untitled2901\src\app\data.service.ts 服务类import {Injectable} from '@angular/core';import {BehaviorSubject} from "rxjs";@Injectable()export class DataService { private me原创 2022-03-17 11:15:23 · 1528 阅读 · 2 评论 -
angular子组件传值给父组件
angular子组件传值给父组件step1: D:\vue\untitled2901\src\app\app.component.tsimport {Component} from '@angular/core';@Component({ selector: 'app-root', template: ` Message:{{message}} <app-child (messageEvent)="receiveMessage($event)"></app原创 2022-03-17 10:31:55 · 1713 阅读 · 0 评论 -
angular父组件传值给子组件
angular父组件传值给子组件ts跟java不一样 不要再构造方法里写一些奇奇怪怪的东西 应该另外写在方法里面step1: 生成子组件 ng generate component childstep2: Parent 传递json数据import {Component} from '@angular/core';@Component({ selector: 'app-root', template: ` <app-child [childMessage]="原创 2022-03-17 10:07:29 · 1072 阅读 · 0 评论 -
Angular使用NgStyle设置动态颜色
Angular使用NgStyle设置动态颜色step1:Angular 中的 NgStyle 指令,您将能够为 DOM 元素设置样式属性。在NgStyle的帮助下,我们将能够轻松地设置风格。在这里,我们将为其分配对象文字D:\vue\untitled2901\src\app\app.component.tsimport {Component, Input, OnInit} from '@angular/core';@Component({ selector: 'app-root', te原创 2022-03-16 15:19:01 · 1560 阅读 · 0 评论 -
Angular使用router路由,做页面跳转,传值
Angular使用router路由,做页面跳转,传值step1: 添加路由模块,创建三个组件模块,首页 我的 详情页ng generate module app-routing --flat --module=appng generate component userng generate component dashboardng generate component userDetailstep2: 路由 D:\vue\untitled2900\src\app\app-routing原创 2022-03-12 18:49:09 · 2540 阅读 · 0 评论 -
angular使用router收发数据
angular使用router收发数据1.发送数据 参考网址:https://www.cnblogs.com/liyfya/p/13436122.htmlimport { Component, OnInit } from '@angular/core';import {User} from "../../bean/user";import {UserService} from "../../service/user.service";import {NavigationExtras,Rout原创 2022-03-11 19:37:22 · 1141 阅读 · 0 评论 -
angular使用service应用分层
angular使用service应用分层step0:创建一个新项目step1: 创建服务user和组件userng generate service userng generate component userstep2: 创建bean类 D:\vue\untitled2899\src\app\user.tsexport class User { id: number; name: string; address: string; constructor(id: numb原创 2022-03-10 16:42:41 · 533 阅读 · 0 评论 -
react使用router路由
step1: cd一个文件夹,执行下面的指令, 创建react项目npm init vite@latest router-tutorial --template reactstep2: 添加routercd router-tutorialnpm install npm install react-router-dom@6npm run devstep3: main.jsximport {render} from 'react-dom'import {BrowserRouter,原创 2022-03-09 11:00:50 · 380 阅读 · 0 评论 -
React中MUI初始化和方法调用
React中MUI初始化和方法调用step1:引用npm install @mui/material @emotion/react @emotion/styledstep2:D:\vue\untitled2123\src\App.tsximport React from 'react';import logo from './logo.svg';import './App.css';import Button from '@mui/material/Button';function Ap原创 2022-03-08 11:12:59 · 1333 阅读 · 0 评论 -
vue在线预览
https://github.com/wrs13634194612/kkFileView原创 2021-06-17 15:11:04 · 508 阅读 · 0 评论 -
Sunlime设置typeScript代码高亮
1.参考网址:https://www.cnblogs.com/ring1992/p/12132581.html2.ctrl + shift + p ,输入ip鼠标左键选择:package control:install package等待安装完成,左下角有安装状态 ing表示正在安装3.安装完成后,重复步骤二,输入typescript点击安装,等待安装完成,关闭所有文件,然后重启软件,再次打开,ts高亮完成...原创 2021-05-10 19:59:55 · 236 阅读 · 0 评论 -
vscode安装typescript环境
参考网址:https://zhuanlan.zhihu.com/p/362772800本文档所有命令都运行在vscode的TERMINAL(终端)step1: 检查node.js是否安装~ node -vv10.16.3~ npm -v6.9.0step2:安装typescriptnpm install -g typescriptstep3:查看typescript版本PS E:\typescript> tsc -vVer...原创 2021-05-10 16:17:15 · 1020 阅读 · 0 评论