Angular 5基于跳转来源动态替换页面内容的组件方案咨询

毫无疑问，通用动态组件是最优解——你所有页面的外观完全一致，只是内容不同，单独创建组件会带来大量冗余代码，后续维护（比如调整样式、添加通用交互）会非常麻烦，而通用组件只需要维护一份核心代码即可。

核心实现思路 #

把所有可变内容（比如标题、描述文本、按钮文案、按钮点击事件、消息类型）作为参数/Props传入组件，而固定的UI结构（比如卡片布局、图标位置、关闭按钮、统一的样式框架）则封装在组件内部。

下面分几种常用技术栈给你具体实现方案：

1. React 实现示例 #

先写通用组件：

import React from 'react';
import './NotificationMessage.css';

const NotificationMessage = ({ 
  title, 
  description, 
  buttonText, 
  onButtonClick,
  type = 'success', // 控制消息样式/图标，默认成功类型
  onClose = () => {}
}) => {
  // 预设不同类型的图标
  const iconMap = {
    success: '✅',
    info: 'ℹ️',
    error: '❌'
  };

  return (
    <div className={`notification notification--${type}`}>
      <div className="notification__icon">{iconMap[type]}</div>
      <div className="notification__content">
        <h3 className="notification__title">{title}</h3>
        <p className="notification__description">{description}</p>
        {/* 只有传入按钮文案时才渲染按钮 */}
        {buttonText && (
          <button 
            className="notification__button" 
            onClick={onButtonClick}
          >
            {buttonText}
          </button>
        )}
      </div>
      <button className="notification__close" onClick={onClose}>×</button>
    </div>
  );
};

export default NotificationMessage;

使用时直接传入动态内容：

// 注册成功场景
<NotificationMessage
  title="Successfully registered by email"
  description="We have sent an email confirming registration"
  type="success"
  buttonText="Resend Email"
  onButtonClick={() => { /* 重发邮件的逻辑 */ }}
  onClose={() => { /* 关闭消息框的逻辑 */ }}
/>

// 其他场景，比如密码重置提示
<NotificationMessage
  title="Password reset link sent"
  description="Check your inbox for password reset instructions"
  type="info"
/>

2. Vue 实现示例 #

通用组件代码：

<template>
  <div :class="`notification notification--${type}`">
    <div class="notification__icon">{{ iconMap[type] }}</div>
    <div class="notification__content">
      <h3 class="notification__title">{{ title }}</h3>
      <p class="notification__description">{{ description }}</p>
      <button 
        v-if="buttonText"
        class="notification__button" 
        @click="handleButtonClick"
      >
        {{ buttonText }}
      </button>
    </div>
    <button class="notification__close" @click="handleClose">×</button>
  </div>
</template>

<script>
export default {
  name: 'NotificationMessage',
  props: {
    title: { type: String, required: true },
    description: { type: String, required: true },
    buttonText: { type: String, default: '' },
    onButtonClick: { type: Function, default: () => {} },
    type: { 
      type: String, 
      default: 'success',
      validator: val => ['success', 'info', 'error'].includes(val)
    },
    onClose: { type: Function, default: () => {} }
  },
  data() {
    return {
      iconMap: {
        success: '✅',
        info: 'ℹ️',
        error: '❌'
      }
    }
  },
  methods: {
    handleButtonClick() {
      this.onButtonClick();
    },
    handleClose() {
      this.onClose();
    }
  }
}
</script>

<style scoped>
.notification {
  padding: 1rem;
  border-radius: 8px;
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
  margin: 1rem;
}
.notification--success {
  background-color: #f0fdf4;
  border: 1px solid #bbf7d0;
}
.notification--info {
  background-color: #f0f9ff;
  border: 1px solid #bae6fd;
}
/* 其他样式省略 */
</style>

使用组件：

<NotificationMessage
  title="Successfully registered by email"
  description="We have sent an email confirming registration"
  type="success"
  button-text="Resend Email"
  @on-button-click="handleResendEmail"
  @on-close="handleCloseNotification"
/>

3. 原生 JavaScript 实现示例 #

如果不用框架，也可以用函数式的方式创建通用消息：

function createNotification({ 
  title, 
  description, 
  buttonText, 
  onButtonClick,
  type = 'success' 
}) {
  const iconMap = {
    success: '✅',
    info: 'ℹ️',
    error: '❌'
  };

  // 创建消息容器
  const notification = document.createElement('div');
  notification.className = `notification notification--${type}`;

  // 图标元素
  const icon = document.createElement('div');
  icon.className = 'notification__icon';
  icon.textContent = iconMap[type];
  notification.appendChild(icon);

  // 内容区
  const content = document.createElement('div');
  content.className = 'notification__content';

  const titleEl = document.createElement('h3');
  titleEl.className = 'notification__title';
  titleEl.textContent = title;
  content.appendChild(titleEl);

  const descEl = document.createElement('p');
  descEl.className = 'notification__description';
  descEl.textContent = description;
  content.appendChild(descEl);

  // 添加按钮（如果有文案）
  if (buttonText) {
    const button = document.createElement('button');
    button.className = 'notification__button';
    button.textContent = buttonText;
    button.addEventListener('click', onButtonClick);
    content.appendChild(button);
  }

  notification.appendChild(content);

  // 关闭按钮
  const closeBtn = document.createElement('button');
  closeBtn.className = 'notification__close';
  closeBtn.textContent = '×';
  closeBtn.addEventListener('click', () => notification.remove());
  notification.appendChild(closeBtn);

  // 添加到页面
  document.body.appendChild(notification);
  return notification;
}

// 使用示例
createNotification({
  title: "Successfully registered by email",
  description: "We have sent an email confirming registration",
  type: "success",
  buttonText: "Resend Email",
  onButtonClick: () => console.log('Resending email...')
});

额外优化建议 #

1. 预设消息模板：把常用的消息文本存在一个常量文件里，避免重复写字符串，比如：

// messageTemplates.js
export const MESSAGE_TEMPLATES = {
  EMAIL_REG_SUCCESS: {
    title: "Successfully registered by email",
    description: "We have sent an email confirming registration",
    type: "success"
  },
  PASSWORD_RESET_SENT: {
    title: "Password reset link sent",
    description: "Check your inbox for reset instructions",
    type: "info"
  }
};

// 使用时直接解构
<NotificationMessage {...MESSAGE_TEMPLATES.EMAIL_REG_SUCCESS} buttonText="Resend Email" />

2. 添加自动关闭：可以加一个autoClose参数，设置多少毫秒后自动移除消息框
3. 动画效果：给消息框添加淡入淡出的CSS动画，提升用户体验

内容的提问来源于stack exchange，提问作者Chocho