黑马程序员技术交流社区

标题: [南京校区]Angular4路由的跳转 [打印本页]

作者: 大蓝鲸小蟀锅 时间: 2019-1-5 17:17
标题: [南京校区]Angular4路由的跳转
本帖最后由大蓝鲸小蟀锅于 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------------

作者: 一个人一座城0.0 时间: 2019-1-6 10:24
看一看。

欢迎光临黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2