时间戳

首页 > 解决方案 > 根据子组件中的选择更改父组件的颜色

angular - 根据子组件中的选择更改父组件的颜色

问题描述

我有一个子组件，它有一个颜色下拉列表。根据下拉列表中选择的内容，父组件的颜色应该改变。

截至目前，我能够根据颜色选择成功更改子组件的颜色，但我想更改父组件的颜色。有什么帮助吗？当我使用参考变量时，我还可以在父组件中打印下拉列表的值，但我希望颜色也能改变。

header.component.html：

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


@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.css']
})
export class HeaderComponent implements OnInit {


  styles: string[] = [];
  selectedStyle: string;


  constructor() { 

  }

  ngOnInit(){

    this.styles = ['red','green','blue','none'];
    }

}

header.component.html

<div [ngClass]="selectedStyle" >

    <select [(ngModel)]="selectedStyle">
       <option *ngFor="let s of styles" [ngValue]="s">{{s}}</option>
    </select>

    </div>

app.component.html

<div [ngClass]="child.selectedStyle"><app-header #child></app-header></div>
  <h2>{{title}}</h2>
  <h1>{{child.selectedStyle}}</h1>

标签： angular

解决方案

处理标题组件 HTML 中的选择更改事件。

header.component.html

<select [ngModel]="selectedStyle" (ngModelChange)="onStyleChange($event)">
  <option *ngFor="let s of styles" [ngValue]="s">{{s}}</option>
</select>

为您的选择添加一个事件处理程序，并将一个事件发射器添加到您的标头组件打字稿中。

header.component.ts


// trigger events using this
@Output() styleChange: EventEmitter<string> = new EventEmitter<string>();

// handle style change events using this
onStyleChange(style: string): void {
  // trigger event
  this.selectedStyle = style;
  this.styleChange.emit(style);
}

处理父 HTML 中的样式更改事件。

app.component.html

<app-header #child (styleChange)="onStyleChange($event)">
</app-header>

处理父 typescript 中的样式更改事件，并设置可用于父 HTML 的属性。

app.component.ts

style: string;

onStyleChange(style: string): void {
  this.style = style;
}

从子组件发出的任何样式现在都可供父组件使用。

推荐阅读