[Angular实战网易云]——25、登录弹框

场景

当点击首页的登录按钮时，需要有个弹框来满足会员登录的功能。但是考虑到会员功能有一些收藏和转发的功能也需要弹框，所以选择使用复用弹框组件，每次调用弹框组件的时候会传递当前的操作，根据操作的不同来选择渲染进弹框的页面。

---

实现

创建组件

将弹窗的组件创建到wy-ui目录下

在会员登录组件中添加点击事件

• member-card.component.html

 <button nz-button class="btn" (click)="openModal.emit()">用户登录</button>

---

当点击按钮后，就会将点击事件发射出去

• member-card.component.ts

    @Output() openModal = new EventEmitter<void>();

---

home父组件添加接收回调

• home.component.html

<app-member-card (openModal)="openModal()"></app-member-card>

---

根据之前的设计，因为弹框的内容不一样，但是想要复用弹框组件，所以在触发弹框时会传递参数来判断当前应该渲染哪个页面，所以可以选择ngrx来接受弹框的不同状态。

初始化ngx

• member.reducer.ts

export enum ModalTypes {
   
    Register = 'register',
    LoginByPhone = 'loginByPhone',
    Share = 'share',
    Like = 'like',
    Default = 'default',
}


export type MemberState = {
   
    modalVisible: boolean, // 显隐状态
    modalType: ModalTypes, // 弹框方式
}

// 初始数据格式
export const initialState: MemberState = {
   
    modalVisible: false,
    modalType: ModalTypes.Default,
}
// 注册动作
const reducer = createReducer(
    initialState,
    on(SetModalVisible, (state, {
    modalVisible }) => ({
    ...state, modalVisible })),
    on(SetModalType, (state, {
    modalType }) => ({
    ...state, modalType })),
)
export function memberReducer (state: MemberState, action: Action) {
   
    return reducer(state, action)
}

• member.actions.ts

import {
    createAction, props } from '@ngrx/store';
import {
    ModalTypes } from '../reducers/member.reducer';

// 设置动作
export const SetModalVisible = createAction('[member] set modal visible', props<{
    modalVisible: boolean }>());
export const SetModalType = createAction('[player] set modal type', props<{
    modalType: ModalTypes }>());

• member.selector.ts

import {
    createFeatureSelector, createSelector } from '@ngrx/store';
import {
    MemberState } from "../reducers/member.reducer";

const selectMemberStates = (state: MemberState) => state;

export const getMember = crea