发表于： 2019-10-30 19:58:17
1 931
今天完成的事：任务6的一些部分熟练angular框架，学会了怎样建立路由
明天要完成的事：对路由熟练掌握并且了解什么是服务shenme是http，并完成任务6.
难题：没有数据去写重置的name，按照上个页面传回来的数据，就是登陆成功之后的数据去ngfor这个重新渲染但是name传回来没有储存，那怎么去获取我所要的数据，现在只能自己创建一个类使用类里的name
收获：
toExponential()
把对象的值转换为指数计数法。
toFixed()
把数字转换为字符串，并对小数点指定位数。
toLocaleString()
把数字转换为字符串，使用本地数字格式顺序。
toPrecision()
把数字格式化为指定的长度。
toString()
把数字转换为字符串，使用指定的基数。数字的基数是 2 ~ 36 之间的整数。若省略该参数，则使用基数 10。
valueOf()
返回一个 Number 对象的原始数字值。
constructor
对创建该对象的函数的引用。
length
返回字符串的长度。
prototype
允许您向对象添加属性和方法
这些是typescript的一些数据类型的属性和方法；没有全部看完稍微略过了，然后感觉准备的差不多了可以开始写任务6了，
然后我遇到一个问题：angular框架是动态的，而我们之前些东西是静态的：angular的value是改变时相关value全部改变无需
事件和方法，但是之前js的是你得通过输入事件去触发才会获取value值
而且这个任务6可以用任务5的登录界面
然后我写了一部分的html和css之后发现登录页跳转到后面的welcome 后台页在到后面的列表页和新增页如何跳转页面以及动态数据变化，
最开始登录那一步我没太理解，而且后面的跳转师兄说是路由跳转，不涉及到页面的话应该不管网址什么是但是这个路由也有url？？？
路由定义 会告诉路由器，当用户点击某个链接或者在浏览器地址栏中输入某个 URL 时，要显示哪个视图。
典型的 Angular 路由（Route）有两个属性：
path：一个用于匹配浏览器地址栏中 URL 的字符串。component：当导航到此路由时，路由器应该创建哪个组件。
如果你希望当 URL 为 localhost:4200/heroes 时，就导航到 HeroesComponent。
看完之后感觉路由就是一个ajax的变种一样点击之后页面不变显示的内容发生改变，这就有点难于区分了，
这里将流程讲一下：ng generate module app-routing --flat --module=app
首先创建一个创建一个模块，顶级模块用于加载和配置路由器，它专注于路由功能，然后由根模块 AppModule 导入它。
你将会使用 RouterModule 中的 Routes 类来配置路由器，所以还要从 @angular/router 库中导入这两个符号。
添加一个 @NgModule.exports 数组，其中放上 RouterModule 。 导出 RouterModule 让路由器的相关指令可以在 AppModule 中的组件中使用。
import { RouterModule, Routes } from '@angular/router';
@NgModule({ exports: [ RouterModule ]})
（创建一个顶级模块用于导航和定义路由）
然后添加路由定义
路由定义 会告诉路由器，当用户点击某个链接或者在浏览器地址栏中输入某个 URL 时，要显示哪个视图。
典型的 Angular 路由（Route）有两个属性：
path：一个用于匹配浏览器地址栏中 URL 的字符串。
component：当导航到此路由时，路由器应该创建哪个组件。
如果你希望当 URL 为 localhost:4200/heroes 时，就导航到 HeroesComponent。
首先要导入 HeroesComponent，以便能在 Route 中引用它。 然后定义一个路由数组，其中的某个路由是指向这个组件的。
import { HeroesComponent } from './heroes/heroes.component';
const routes: Routes = [ { path: 'heroes', component: HeroesComponent }];
（除了要有顶级模块之外，定义路由首先需要在模块中导入需要跳转的组件，然后在path和component里定义你的匹配字符串和需要创建的组件）
RouterModule.forRoot()
你必须首先初始化路由器，并让它开始监听浏览器中的地址变化。
把 RouterModule 添加到 @NgModule.imports 数组中，并用 routes 来配置它。你只要调用 imports 数组中的 RouterModule.forRoot() 函数就行了。
imports: [ RouterModule.forRoot(routes) ],
这个就是@NgModule.imports 数组，文件是
AppRoutingModule。ts
（除了定义路由之外还要让路由器监听浏览器的地址变化使得你在浏览器中输入地址任然可以跳转路由）具体原理不是很了解不过跟angular的库有关是框架本身自带的。
然后就是添加路由出口 （RouterOutlet）
（给你路由跳转的组件compoent创建的组件一个在页面上展示的地方，在展示的地方添加<router-outlet></router-outlet>元素即可）
<router-outlet> 会告诉路由器要在哪里显示路由的视图。
能在 AppComponent 中使用 RouterOutlet，是因为 AppModule 导入了 AppRoutingModule，而 AppRoutingModule 中导出了 RouterModule。
routerLink 属性的值为 "/heroes"，路由器会用它来匹配出指向 HeroesComponent 的路由。 routerLink 是 RouterLink 指令的选择器，它会把用户的点击转换为路由器的导航操作。 它是 RouterModule 中的另一个公共指令。
做完这一切注意应该会报错为啥？？？
因为能在 AppComponent 中使用 RouterOutlet，是因为 AppModule 导入了 AppRoutingModule，而 AppRoutingModule 中导出了 RouterModule。
所以还要导出 RouterModule
导出就不会报错了
返回列表
评论