Question

我正在学习角度4，我是练习自定义指令，我想要做的是在选择任何选项时更改文本边框的颜色，意味着如果选择的选项是红色然后将边框更改为红色。蓝色然后蓝色。如下所示：

以下是我的指令类：

import {Component} from '@angular/core'

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

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

以下是我的组件类：

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

以下是指令用法的html：

import collections
T = collections.Counter([2,3,1])
any(T == collections.Counter(x) for x in S)

Answer 1

如果选择了选项，则在您的指令中调用函数。

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);
  }
}

Answer 2

这是您的必需指令：

<强>步骤/说明：

我创建了一个采用输入颜色并更改边框的指令

我使用@Input('myColor') myColor: string;来接收颜色   来自HTML的指令

我添加了ngModel来选择并在HTML中添加[myColor]="color"

我使用ngOnChnages来检测颜色变化和各自的边界   颜色会改变

最后我使用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>

Here is a Working DEMO

更新：没有指令在循环中工作：

<强>代码：

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]};
     }
   }
}

Here is a working DEMO

如何使用角度4中的自定义指令为兄弟文本添加颜色

2 个答案: