Как добавить цвет к родному тексту с помощью пользовательской директивы в angular 4

Question

Я изучаю угловой 4, я практикую пользовательскую директиву, и я пытаюсь изменить цвет границы текста при выборе любой опции из выбора, то есть если выбранная опция красная, то изменить границу на красную. синий, потом синий. Как ниже:

Ниже приведен мой класс директив:

import {Directive , ElementRef, Renderer, OnInit} from'@angular/core'
@Directive({
selector : "[dirNew]"
})
export class dirNew{
constructor ( private _el : ElementRef, private ren : Renderer){
//  ren.setElementStyle(private _ 
el.nativeElement.parentElement,"background","solid 2px red");
}
ngOnInit() {
//console.log(this._el.nativeElement.parentElement);   

this.ren.setElementStyle(this._el.nativeElement.parentElement,
"background","solid 2px red");
}
}

Ниже приведен мой класс компонентов:

import {Component} from '@angular/core'

@Component({
selector:"dir-app",
templateUrl:"drComp.html"
})

export class dirComp{
arrName =[1,2,3];
colors = ["red","blue","pink"];
}

Ниже мой HTML для использования директивы:

<div *ngFor="let arr of arrName">{{arr}}
<input type ="text">
<select>
    <option *ngFor="let cl of colors" dirNew>{{cl}}</option>
</select>
</div>

Answer 1

Вот ваша обязательная директива:

Действия / Пояснение:

1. Я создал директиву, которая принимает цвет ввода и меняет границу
2. Я использовал @Input('myColor') myColor: string;, чтобы получить цвет от директива из HTML
3. Я добавил ngModel для выбора и добавил [myColor]="color" в HTML
4. Я использовал ngOnChnages для обнаружения изменений цвета и соответствующей границы цвет будет изменен
5. Наконец я использовал this.el.nativeElement.style.border и использовал Цвет от ввода для динамического изменения цвета границы.

Код:

Директива:

import {  Directive, ElementRef, HostListener, Input, Renderer, SimpleChanges } from '@angular/core';

@Directive({ selector: '[myColor]' })

export class colorDirective {
    @Input('myColor') myColor: string;

    ngOnChanges(changes: SimpleChanges) {
    if (changes['myColor']) {
      console.log(changes['myColor'])
      if(changes['myColor'].previousValue != changes['myColor'].currentValue){
         this.highlight(changes['myColor'].currentValue);
      }
    }
  }

    constructor(public el: ElementRef, renderer: Renderer) {
           this.highlight(this.myColor);
    }

    private highlight(color: string) {
       this.el.nativeElement.style.border = '3px solid '+ color;
       }
}

Используйте его в HTML как:

<input type ="text" [myColor]="color">
<select [(ngModel)]="color" (change)="change()">
    <option *ngFor="let cl of colors" dirNew>{{cl}}</option>
</select>

Вот рабочая демонстрация

---

Обновление: без директивы, работающей в цикле:

Код:

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

@Component({
  selector: 'my-app',
  template: `
  <div class="container">
<div *ngFor="let arr of arrName">
<input type ="text" [ngStyle]="getStyle(arr)">
<select [(ngModel)]="newobject[arr]">
    <option *ngFor="let cl of colors" dirNew>{{cl}}</option>
</select>
</div>

  </div>
  `,
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  newobject = {};
  arrName =[1,2,3];
  colors = ["red","blue","pink"];

   getStyle(value){
      if(this.newobject[value]){
       return {"border": "2px solid "+this.newobject[value]};
     }
   }
}

Вот рабочая ДЕМО

Answer 2

Вызовите функцию в вашей Директиве, когда выбрана опция.

.html

<select (change)="OnChange($event);">
<option *ngFor="let cl of colors" dirNew>{{cl}}</option>
</select>

.ts

import { dirNew } from './app-directive.component';
....

export class appComponent {
    @ViewChild('dirNew') dirV;

    OnChange(event: any){
        this.dirV.OnChangeSelect(event.target.value)
    }
}

directive.ts

import {Directive , ElementRef, Renderer, OnInit} from'@angular/core'

@Directive({
selector : "[dirNew]"
})

export class dirNew{
  .....
  .....
  .....

  OnChangeSelect(color: any){

   this.ren.setElementStyle(this._el.nativeElement.parentElement,
    "background",color);
  }
}