Angular(13) - 添加面板 - 官方教程英雄指南之添加仪表盘 （详细解说）

1 生成面板组件

ng generate component dashboard

2 修改面板文件

• 2.1 dashboard组件中，加载样式，并通过循环*ngFor输出英雄的名字

src/app/dashboard/dashboard.component.html

<h3>Top Heroes</h3>
<div class="grid grid-pad">
  <a *ngFor="let hero of heroes" class="col-1-4">
    <div class="module hero">
      <h4>{{hero.name}}</h4>
    </div>
  </a>
</div>

• 2.2 导入Hero服务{ HeroService }
• 声明数组 heroes: Hero[] = [];
• 注入服务 constructor(private heroService: HeroService) { }
• 组件加载时调用方法 getHeroes(): void

src/app/dashboard/dashboard.component.ts

import { Component, OnInit } from '@angular/core';
import { Hero } from '../hero';
import { HeroService } from '../hero.service';

@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: [ './dashboard.component.css' ]
})
export class DashboardComponent implements OnInit {
  heroes: Hero[] = [];

  constructor(private heroService: HeroService) { }

  ngOnInit() {
    this.getHeroes();
  }

  getHeroes(): void {
    this.heroService.getHeroes()
      .subscribe(heroes => this.heroes = heroes.slice(1, 5));
  }
}

• 2.3 加载样式文件，这里不多说

/* DashboardComponent's private CSS styles */
[class*='col-'] {
  float: left;
  padding-right: 20px;
  padding-bottom: 20px;
}
[class*='col-']:last-of-type {
  padding-right: 0;
}
a {
  text-decoration: none;
}
*, *:after, *:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
h3 {
  text-align: center;
  margin-bottom: 0;
}
h4 {
  position: relative;
}
.grid {
  margin: 0;
}
.col-1-4 {
  width: 25%;
}
.module {
  padding: 20px;
  text-align: center;
  color: #eee;
  max-height: 120px;
  min-width: 120px;
  background-color: #3f525c;
  border-radius: 2px;
}
.module:hover {
  background-color: #eee;
  cursor: pointer;
  color: #607d8b;
}
.grid-pad {
  padding: 10px 0;
}
.grid-pad > [class*='col-']:last-of-type {
  padding-right: 20px;
}
@media (max-width: 600px) {
  .module {
    font-size: 10px;
    max-height: 75px; }
}
@media (max-width: 1024px) {
  .grid {
    margin: 0;
  }
  .module {
    min-width: 60px;
  }
}

3 添加dashboard路由, 增加一条数组常量

src/app/app-routing.module.ts

{ path: 'dashboard', component: DashboardComponent },

4 把dashboard添加到root , 这样刷新后，就可以看到面板已经出现

<h1>{{title}}</h1>
<nav>
  <a routerLink="/dashboard">Dashboard</a>
  <a routerLink="/heroes">Heroes</a>
</nav>
<router-outlet></router-outlet>
<app-messages></app-messages>

5 导航到英雄详情,和上面一样，增加导入，再增加路由数组

src/app/app-routing.module.ts

import { HeroDetailComponent }  from './hero-detail/hero-detail.component';

const routes: Routes = [
  { path: '', redirectTo: '/dashboard', pathMatch: 'full' },
  { path: 'dashboard', component: DashboardComponent },
  { path: 'detail/:id', component: HeroDetailComponent },
  { path: 'heroes', component: HeroesComponent }
];

6 修改dashboard模板，通过数组渲染链接和页面

src/app/dashboard/dashboard.component.html

<a *ngFor="let hero of heroes" class="col-1-4"
    routerLink="/detail/{{hero.id}}">
  <div class="module hero">
    <h4>{{hero.name}}</h4>
  </div>
</a>

7 调整HeroesComponent 中的英雄链接

<ul class="heroes">
  <li *ngFor="let hero of heroes">
    <a routerLink="/detail/{{hero.id}}">
      <span class="badge">{{hero.id}}</span> {{hero.name}}
    </a>
  </li>
</ul>

8 支持路由的 HeroDetailComponent

src/app/hero-detail/hero-detail.component.ts

• 8.1 导入服务

import { ActivatedRoute } from '@angular/router';
import { Location } from '@angular/common';

import { HeroService }  from '../hero.service';

• 8.2 注入服务实例

constructor(
  private route: ActivatedRoute,
  private heroService: HeroService,
  private location: Location
) {}

• 8.3 从路由参数中提取 id,并通过id获取数据

ngOnInit(): void {
  this.getHero();
}

getHero(): void {
  const id = +this.route.snapshot.paramMap.get('id');
  this.heroService.getHero(id)
    .subscribe(hero => this.hero = hero);
}

9 获取单个英雄数据

src/app/hero.service.ts

getHero(id: number): Observable<Hero> {
  // TODO: send the message _after_ fetching the hero
  this.messageService.add(`HeroService: fetched hero id=${id}`);
  return of(HEROES.find(hero => hero.id === id));
}

10 从detail原路返回

• 10.1 在detail页面中增加按钮，并绑定事件

src/app/hero-detail/hero-detail.component.html (

<button (click)="goBack()">go back</button>

• 10.2 在服务中增加相应的代码返回

src/app/hero-detail/hero-detail.component.ts

goBack(): void {
  this.location.back();
}