如何在Angular 4中获取按钮下拉框值并保存到localStorage？

嘿，我来帮你搞定这个问题！针对你给出的Bootstrap下拉框，我们可以通过给下拉项绑定点击事件、跟踪选中状态，再结合Angular的生命周期钩子来完成值的获取和localStorage存储。下面是具体步骤：

1. 修改模板代码 #

首先，我们需要给每个下拉选项添加点击事件，同时把显示的选中文本改成动态绑定的变量（代替原来固定的"View Domains"）：

<div class="form-group">
  <button type="button" class="btn btn-secondary dropdown-toggle form-group" 
          (click)="get()" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <!-- 用插值表达式显示选中的文本，默认显示"View Domains" -->
    <span id="selected">{{ selectedText || 'View Domains' }}</span>
  </button>
  <div class="dropdown-menu arrow form-group">
    <!-- 给每个下拉按钮绑定点击事件，传递对应的值 -->
    <button class="dropdown-item" type="button" value="1" (click)="selectItem('1')">1</button>
    <button class="dropdown-item" type="button" value="2" (click)="selectItem('2')">2</button>
    <!-- 其他下拉项按照同样的方式添加即可 -->
  </div>
</div>

2. 组件逻辑实现 #

在对应的Angular组件类中，我们需要：

• 定义变量跟踪选中的值和文本
• 在组件初始化时从localStorage读取已保存的值
• 实现点击事件处理方法，保存值到localStorage

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'your-component-selector', // 替换成你的组件选择器
  templateUrl: './your-component.component.html', // 替换成你的模板路径
  styleUrls: ['./your-component.component.css']
})
export class YourComponent implements OnInit {
  // 存储选中的值和显示文本
  selectedValue: string | null = null;
  selectedText: string | null = null;

  ngOnInit() {
    // 页面初始化时，从localStorage读取之前保存的选中值
    const savedValue = localStorage.getItem('selectedDomain');
    if (savedValue) {
      this.selectedValue = savedValue;
      this.selectedText = savedValue; // 如果显示文本和值一致，直接赋值；如果不一致，需要做映射
    }
  }

  // 处理下拉项的点击事件
  selectItem(value: string) {
    // 更新组件内的选中状态
    this.selectedValue = value;
    this.selectedText = value;

    // 将选中值保存到localStorage
    localStorage.setItem('selectedDomain', value);

    // 可选：手动关闭Bootstrap下拉框（因为点击自定义按钮可能不会自动关闭）
    const dropdownToggle = document.querySelector('.dropdown-toggle') as HTMLElement;
    const dropdownMenu = document.querySelector('.dropdown-menu') as HTMLElement;
    dropdownToggle.classList.remove('show');
    dropdownMenu.classList.remove('show');
  }

  // 保留你原来的get()方法
  get() {
    // 你的原有逻辑代码
  }
}

3. 进阶：处理值与显示文本不一致的情况 #

如果你的下拉项是"值ID + 域名文本"的形式（比如value是1，显示的是"example.com"），可以用对象数组来管理选项，让代码更灵活：

组件内定义选项数组 #

// 定义下拉选项数组
domainOptions = [
  { value: '1', text: 'example1.com' },
  { value: '2', text: 'example2.com' },
  // 更多选项...
];

修改模板用*ngFor生成下拉项 #

<div class="dropdown-menu arrow form-group">
  <button *ngFor="let option of domainOptions" 
          class="dropdown-item" type="button" 
          [value]="option.value" (click)="selectItem(option)">
    {{ option.text }}
  </button>
</div>

更新selectItem方法和初始化逻辑 #

selectItem(option: { value: string; text: string }) {
  this.selectedValue = option.value;
  this.selectedText = option.text;
  // 保存整个选项对象到localStorage（需要转成JSON字符串）
  localStorage.setItem('selectedDomain', JSON.stringify(option));
}

ngOnInit() {
  const savedOption = localStorage.getItem('selectedDomain');
  if (savedOption) {
    const parsedOption = JSON.parse(savedOption);
    this.selectedValue = parsedOption.value;
    this.selectedText = parsedOption.text;
  }
}

关键注意点 #

• localStorage只能存储字符串，所以存储对象时要用JSON.stringify()，读取时用JSON.parse()解析
• 组件初始化时读取localStorage，确保页面刷新后选中状态不会丢失
• 如果使用Bootstrap的下拉组件，点击自定义按钮后可能不会自动关闭下拉框，需要手动操作DOM移除show类

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