时间戳

首页 > 解决方案 > 如何在 Angular 中的一个子组件中实现下拉？

angular - 如何在 Angular 中的一个子组件中实现下拉？

问题描述

我有一个应用程序组件，它作为一个孩子有一个标题组件。我想在该标题组件中实现下拉列表。下拉列表将由颜色列表组成，并且将选择颜色，因此背景应成为该颜色。

知道如何实现吗？尤其是Material Ui？有任何想法吗？

标签： angular

解决方案

如何根据所选选项在不同组件中的 div 上设置背景颜色的示例。

请参阅Medium - 在 Angular 组件之间共享数据以了解 @Output 使用以将值传递给父级的说明。

AppHeader 组件 html:

 <select (change)="updateSelectedStyle($event.target.value)">
    <option *ngFor="let s of styles" [ngValue]="s">{{s}}</option>
 </select>

 </div>

AppHeader 组件：

export class MyComponent implements OnInit  {

  styles: string[] = [];


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



 export class AppHeaderComponent {

  @Output() updateStyleEvent = new EventEmitter<string>();

updateSelectedStyle(value) {
    this.updateStyleEvent.emit(value)
  }

      ngOnInit()
      {
      this.styles = ['red','green'];
      }
    }

应用组件 CSS：

.red {background:#f00}
.green {background:#0f0}

应用组件：

  export class AppComponent {

    selectedStyle:string;

  updateStyle($event) {
    this.selectedStyle = $event
  }

应用组件 html：

<div [ngClass]="selectedStyle"></div>
    <app-header (updateStyleEvent)="updateStyle($event)"></app-header>

StackBlitz 中的工作示例（hello 组件 = app-header）

推荐阅读