如何在Angular中將資料從父級傳遞給子級以更改子級的背景顏色？

我想color從父母傳給孩子。然后在子組件中，我想訪問元素 itselt 以更改背景顏色，如下所示this.element.nativeElement.style.backgroundColor === this.bgColor;

但是沒有變化。

子組件：event-thumbnail.component.ts

父組件：events-list.component.ts

//事件縮略圖.component.ts

import { Component, ElementRef, Input, OnInit } from '@angular/core';
import { elementAt } from 'rxjs';

@Component({
  selector: 'event-thumbnail',
  template: `
    <div >
      <h2>{{ event.name }}</h2>
      <div>Date: {{ event.date }}</div>
      <div>Time: {{ event.time }}</div>
      <div>Price: $ {{ event.price }}</div>
      <div>
        <span>Location: {{ event.location.address }}</span>
        <span>&nbsp;</span>
        <span>{{ event.location.city }}, {{ event.location.country }}</span>
      </div>
    </div>
  `,
})
export class EventThumbnailComponent implements OnInit {
  @Input() event: any = [];
  @Input() bgColor: string = 'red';

  constructor(public element: ElementRef) {
    console.log(element.nativeElement);
 
  }

  ngOnInit(): void {
    this.element.nativeElement.style.backgroundColor = this.bgColor;
    console.log(this.element.nativeElement.style.backgroundColor); //
  }
}

我正在傳遞color和event來自父母如下

//事件串列.components.ts

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

@Component({
  selector: 'events-list',
  templateUrl: './events-list.component.html',
})
export class EventsListComponent {
  color = 'black';
  event = {
    id: 1,
    name: 'Angular Connect',
    date: '9/26/2036',
    time: '10:00 am',
    price: 56,
    imageUrl: '/assets/images/angularconnect-shiels.png',
    location: {
      address: '1057 DT',
      city: 'London',
      country: 'England',
    },
  };
}

//事件串列.component.html

<div>
  <h1>Upcoming Angular Events</h1>
  <hr />
  <event-thumbnail [bgColor]="color" [event]="event"></event-thumbnail>
</div>

uj5u.com熱心網友回復：

[ngStyle]與您已有的輸入一起使用。

<div [ngStyle]="{ backgroundColor: bgColor }">
  <!-- content here -->
</div>

將邏輯放在建構式中，或者嘗試訪問任何東西，ElementRef除非在非常特定的情況下，這是一種反模式。

uj5u.com熱心網友回復：

我在您的代碼中看到的 3 個問題。

1. 在this.element.nativeElement.style.backgroundColor === this.bgColor;您沒有為元素分配背景顏色的情況下，您應該使用“=”運算子而不是“===”
2. 您輸入的 bgColor 值在建構式中不可用，僅在稍后發生的 OnInit 上可用
3. 初始化后您的背景不會更改，因為它僅在初始化時設定您的背景。

我會通過使用 ngOnChanges() 來解決它，如下所示：

export class EventThumbnailComponent implements OnChanges {
  @Input() event: any = [];
  @Input() bgColor: string = 'red';

  constructor(public element: ElementRef) {
  }

  ngOnChanges(changes: SimpleChanges): void {
   if (changes['bgColor']) {
    this.element.nativeElement.style.backgroundColor === this.bgColor;
   }
  }
}

無論如何，這肯定不是實作您想要實作的目標的最佳方式，我建議您查看 ngStyle 指令。

uj5u.com熱心網友回復：

我同意 Gil 的回答（https://stackoverflow.com/a/71705766/11022022），但我會嘗試只用 css 來做。

在父組件的 css 中：

.child-container {
    background-color: #whatever;
}

在子組件的 css 中：

:host {
    background-color: inherit;
}

還可以查看 scss 以獲得更高級的選項，例如變數：https ://sass-lang.com/

uj5u.com熱心網友回復：

輸入設定器是您的朋友。

          import { Component, Input } from '@angular/core';
        
        @Component({
          selector: 'app-name-child',
          template: '<h3>"{{name}}"</h3>'
        })
        export class NameChildComponent {
          @Input()
          set bgColor(name: string) {
                this._bgColor = name;
          }

private _bgColor: string = 'red';
    
      constructor() {
      }
    
        }

https://angular.io/guide/component-interaction#intercept-input-property-changes-with-a-setter

標籤：有角度的 捆绑 风格 装饰师

上一篇：Angular-如何為多個http請求實作switchMap？

下一篇：node.jsexpress只回傳與用戶相關的元素