Angular学习笔记：英雄之旅（2

1.导航

导航的第一步就是建立路由，路由使不同的组件之间相互关联了起来，一般来说在创建项目的时候他是会自动的询问你是否要创建路由，当然你如果忘了，也有生成路由的代码：

ng generate module app-routing --flat --module=app

之后就会生成一个名为app-routing.moudule.ts的路由文件，这个文件的基础代码如下：

import { NgModule } from '@angular/core';

import { RouterModule, Routes } from '@angular/router';

const routes: Routes = [{}];

@NgModule({
 imports: [RouterModule.forRoot(routes)],
 //将咱们的routes注册到这个地方，路由就会生效；
 exports: [RouterModule]
})
export class AppRoutingModule { }

之后将英雄之旅的相关组件放在这里，我们的英雄的主要组件名为newpage.component，首先是引入路径

import { NewpageComponent } from './newpage/newpage.component';

之后的传入路径的声明为：

const routes: Routes = [
  {path:'heroes',component:NewpageComponent}
];
//当我们去找heroes的网址，他就会去找这个叫newpage的组件

完整的路由ts代码如下：

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { NewpageComponent } from './newpage/newpage.component';

const routes: Routes = [
  {path:'heroes',component:NewpageComponent}
];
//当我们去找heroes的网址，他就会去找这个叫newpage的组件

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  //将咱们的routes注册到这个地方，路由就会生效；
  exports: [RouterModule]
})
export class AppRoutingModule { }

之后在app-component.html文件中将之前的<app-newpage>标签替换掉为

之后页面的网址就会仅显示我们的第一节的直接在app.compomnent中的标签，如果想要看之前的英雄列表，只要把网页后面跳转到相关的路径就可以了：

http://localhost:4200/heroes
//后面的/heroes就是跳转的路径

在浏览器生成的导航的代码时独有的，这里标注下写法

<nav>
    <a routerLink="/heroes">Heroes</a>
  </nav>
a标签后面的routerlink是angular独有的，后面的是对heroes声明的组件进行跳转

这样就可以在主页的页面上进行跳转了

仪表板

首先在powershell中创建：

ng generate component dashboard

ps:cong 从服务器中取数据在ts文件中的写法是：

在service.js中根据api取出数据，形式大致是：

getHero(id: number): Observable<Hero> {}

然后最后一部分太复杂了，我还没弄懂，之后搞懂在补这里