Angular&TypeScript

Angular&TypeScript

📒博客首页:蔚说的博客
🎉欢迎关注🔎点赞👍收藏⭐️留言📝
🙏作者水平很有限,如果发现错误,求告知,多谢!
🌺有问题可私信交流!!!
(达内教育学习笔记)仅供学习交流

TS简介

TypeScript是JavaScript类型的超级,他可以编译成纯的JavaScript。TypeScript可以在任何浏览器,任何计算机和任何操作系统上运行,并且是开源的。
Angular从V2.x开始使用TS编写;Vue.js从V3开始使用TS编写;
中文网:https://www.tslang.cn/

浏览器不支持TS,其使用步骤:
1.下载TS的编译器

npm i -g typescript

2.编写.ts文件,使用编译器转化为.js

tsc hello.ts

//得到hello.js
使用Ts学习手册:https://www.tslang.cn/docs/home.html
TS学习手册直通车

TS的扩展特性:

  • TS是强类型语言—js是弱类型语言
    强类型语言的特点:变量,形参,函数都要声明类型
    uname:string
    f1(n1:number):boolean{
    return ture
    }
    常用的数据类型关键字:string、number、boolean、any、number[]、Object、Date、Void
  • TS对属性和方法成员定义三种访问修饰符,限制外界访问权限
    private:私有的,私有成员只能在本类内部使用
class User {
    private age:number = 20
    setAge(age:number){
        if(age <= 18 || age >= 60){
            console.log('非法的年龄')
        }else{
            this.age = age
            console.log(this.age)
        }
    }
}
let U2 =new User();
U2.setAge(20)

protect:被保护的,私有成员只能在本类内部和子类内部使用

class Emp{
    protected ename:string =''
    private salary:number = 20
}
class Coder extends Emp{
    lang:string = ''
    override ename = 'tom'
}

public:公共的,公共成员在本类以及外部使用
提示:一般的,class内的属性不应该让外部随便访问,通常设置为private,方法一般允许被访问为public。

访问修饰符的特殊用法

下述两种写法的作用相同:
第一种:

class Student{
    private sname:string = ''
    //构造方法
    constructor(sname:string){
        this.sname = sname
    }
}

第二种:
声明私有方法的一种简写方法

class Student{
   //简写方法(只有构造方法可以这样写)
   constructor(private sname:string){
   }
}

面向对象编程-class和interface

interface :接口,是一种特殊的类,规范“要求某个class必须具备XXX方法”如管道类必须实现transform方法

//使用接口要求小汽车必须提供start和stop两个方法
interface Runnable{
    start():any;//接口的方法没有主题
    stop():any
}
//类不能继承接口但是类可以实现接口
class Car implements Runnable{
    start(){
        //接口的实现者必须要提供指定的方法,要有主体
    }
    stop(){

    }

装饰器

装饰器是一种特殊类型的声明,它能够被附加到类声明,方法, 访问符,属性或参数上。 装饰器使用 @expression这种形式,expression求值后必须为一个函数,它会在运行时被调用,被装饰的声明信息做为参数传入。

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
1. 安装必要的依赖 使用 Angular 框架实现高德地图需要安装 @types/amap-js-api 和 @types/amap-js-sdk 两个依赖。 ```bash npm install @types/amap-js-api @types/amap-js-sdk --save-dev ``` 2. 配置 highCharts API Key 在 app.module.ts 中配置高德地图的 API Key: ```typescript import { AMapLoaderService, LoaderOptions } from '@delon/theme'; // ... const options: LoaderOptions = { key: '你的高德地图 API Key', }; // ... @NgModule({ imports: [ // ... ], declarations: [ // ... ], providers: [ // ... AMapLoaderService, { provide: 'DA_STORE_TOKEN', useValue: {}, }, { provide: 'HIGHCHARTS_MODULES', useFactory: () => [more, exporting], }, { provide: HIGHCHARTS_MODULES, useFactory: () => [highcharts], } ], }) export class AppModule {} ``` 3. 创建地图的 wrapper 服务类 我们需要创建一个 wrapper 类,封装高德地图的调用,以便在内部进行维护和扩展。 ```typescript import { Injectable } from '@angular/core'; @Injectable({ providedIn: 'root' }) export class MapService { private AMap: any; constructor() { this.loadMapScript(); } private loadMapScript() { const script = document.createElement('script'); script.type = 'text/javascript'; script.async = true; script.src = `https://webapi.amap.com/maps?v=1.4.15&key=${environment.amapApiKey}&callback=initAMap`; script.onerror = () => { console.error('Could not load map script!'); }; document.body.appendChild(script); } public getMapInstance() { return new Promise<any>((resolve, reject) => { if (this.AMap) { resolve(this.AMap); } else { const callbackName = `initAMap${Math.floor(Math.random() * 10000)}`; window[callbackName] = () => { this.AMap = window.AMap; resolve(this.AMap); delete window[callbackName]; }; const script = document.createElement('script'); script.type = 'text/javascript'; script.async = true; script.src = `https://webapi.amap.com/maps?v=1.4.15&key=${environment.amapApiKey}&callback=${callbackName}`; script.onerror = () => { console.error('Could not load map script!'); delete window[callbackName]; reject(); }; document.body.appendChild(script); } }); } } ``` 在上面的代码中,我们加载了高德地图 SDK 并在异步加载结束后返回 AMap 实例。 4. 在组件中使用地图查询服务 现在我们可以在组件中使用地图查询服务了。让我们创建一个 search.component.ts 文件实现这个服务。 ```typescript import { Component, OnInit } from '@angular/core'; import { MapService } from '../services/map.service'; @Component({ selector: 'app-search', templateUrl: './search.component.html', styleUrls: ['./search.component.scss'] }) export class SearchComponent implements OnInit { constructor(private mapService: MapService) {} ngOnInit() {} searchPlace(query: string) { this.mapService.getMapInstance().then(AMap => { const placeSearch = new AMap.PlaceSearch({ pageSize: 10, pageIndex: 1, city: '全国', map: new AMap.Map('map', { zoom: 15, resizeEnable: true, }), panel: 'panel' }); placeSearch.search(query, function (status: any, result: any) { // 处理查找结果 }); }); } } ``` 这里我们定义了一个 `searchPlace` 方法,用来查询地点。当我们调用 `searchPlace(query)` 的时候,它将使用 `MapService` 实例来获取 AMap 实例,然后使用 AMap 的 `PlaceSearch` 类查询地点。 5. 在 HTML 模板中添加搜索输入框和地图 最后,我们将在 HTML 模板中创建搜索输入框和地图。 ```html <div class="search-container"> <input type="text" [(ngModel)]="searchQuery" placeholder="请输入地点名称"> <button (click)="searchPlace(searchQuery)">搜索</button> </div> <div id="map" style="height: 400px;"></div> <div id="panel"></div> ``` 现在我们已经实现了一个简单的搜索地点页面,它可以通过高德地图查询地点并在地图上展示出来。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

蔚说

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值