A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

本帖最后由 大蓝鲸小蟀锅 于 2019-1-5 17:17 编辑

typescript,简称ts,是一个js的超集。说白了,你可以把它当作一个新的js去看待,但是要主要它依赖于js


那么,在angular中使用或者说,需要了解ts的什么特性才能看懂呢

1.变量的声明方式
2.类和继承的概念
好了,可以了。。。当然了,不是说就之让大家就学习这两个
下面我们来看一下一个angular的ts文件都有啥

1.  @angular/core核心模块,必须得引入的,可以看看下面那几张图,路由也好、模块也好,都有这个核心组件
2.  @component,它是核心模块当中的一份子,用来关联html和css文件的
3.  类和继承,初始化一个叫JsAPIComponent的组件
4.  变量的申明:angular中的变量声明可以在这里声明也可以在方法中申明,这里的申明方法类似于vue中的data的return里面
          ts中,就必须给变量加个类型。 比如: inValue:string = 'xyz',这个时候再 this.inValue = 123,就会报错,说不能把number类型给string类型
          比较严谨一些,而我这里写个any,表示任何类型都行,不会受类型的限制
5.  生命周期其中之一,  注意再 核心组件中写入 生命周期 OnInit,在export class xxxxxxx的后面也要写上 OnInit,如果有多个声明周期,用逗号隔开。
          然后,不能忘记,在里面写个 ngOnInit() {}  这里写上的代码就表示在该周期下执行
6.  如果是个正常的方法就可以在这里写,也可以写在声明周期里。


好的,以上简单介绍了下 ts和angular的关系、使用
-----------------------------------------------------------------------------------------


1.   创建完一个angular的项目的时候,可以看到以下目录,代码一般都在app中写


2.  启动项目的方法,,,如果你想启动两个angular项目,需要改变一下端口号。 用 -p 即可


3.   既然我们写出来一个组件,目的自然是可以去跳转过去。因此在配置的时候,不能忘记要写个 路由, 一般都会以 routing.ts 命名



4.    path中配置跳转的路由, component中配置 要显示的 组件。


5.   angular比较复杂的地方的就在于,它不仅仅是配置了路由,创建了一个组件,就可以使用了。它还需要在modules中去引入所有你创建的文件
     路由必须要引在imports, 组件的话 都在 declarations中。记住,是所有的!!!


6.   在根目录中,占位的标志,和vue的router-view一样。它也可以在其他的文件中使用


7.   配置完了,以后,我们可以手动的去输入路由看看能不能成功,如果不行,建议再配置一遍



8.  现在给它配置两个按钮,就可以通过点击的方式去跳转了,这里是使用了routerLink,,,是写在了标签的里面。  注意中括号




----------End------------

1 个回复

正序浏览
看一看。
回复 使用道具 举报
您需要登录后才可以回帖 登录 | 加入黑马