[Angular实战网易云]——28、个人中心

个人中心

个人中心是展示当前登录人信息的一个模块，关于最近听歌排行以及创建的歌单和收藏的歌单列表等。其入口是在首页登录后头像的展示位置处。

---

实现

入口

• app.component.html

<ul>
	<li nz-menu-item [routerLink]="['/member', user.profile.userId]">
		<i nz-icon nzType="user" nzTheme="outline"></i>我的主页
	</li>
	<li nz-menu-item (click)="onLogout()">
		<i nz-icon nzType="close-circle" nzTheme="outline"></i>退出
	</li>
</ul>

当点击li标签时将当前登录人的ID传给个人中心模块。

---

创建个人中心模块

使用指令在pages目录下创建模块和组件：

---

为组件添加路由

• member-routing.module.ts

const routes: Routes = [
    {
    path: 'member/:id', component: CenterComponent, data: {
    title: '个人中心' }, resolve: {
    user: CenterResolverService } },
    {
    path: 'records/:id', component: RecordDetailComponent, data: {
    title: '听歌记录' }, resolve: {
    user: RecordResolverService } },
];

@NgModule({
   
    imports: [RouterModule.forChild(routes)],
    exports: [RouterModule],
    providers: [CenterResolverService, RecordResolverService]
})
export class MemberRoutingModule {
    }

其中使用了路由守卫来保证数据的完整。

---

调用API

根据返回值创建返回值类型

• member.types.ts

export type RecordVal = {
   
    playCount: number;
    score: number;
    song: Song;
}

type recordKeys = 'weekData' | 'allData';

export type UserRecord = {