如何在Angular 4中用自定义指令实现兄弟文本上色及边框颜色切换

嘿，正在折腾Angular 4自定义指令对吧？我来帮你把这两个功能落地～

一、给兄弟文本添加颜色 #

要实现这个功能，我们可以借助ElementRef拿到指令所在元素的兄弟节点，再用Renderer来修改它的颜色。这里要用到OnInit钩子，确保组件初始化完成后再操作DOM：

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

@Directive({ selector: "[dirNew]" })
export class dirNew implements OnInit {
  constructor(private _el: ElementRef, private ren: Renderer) {}

  ngOnInit() {
    // 获取当前元素的下一个兄弟节点（如果你的兄弟元素在前面，就用previousElementSibling）
    const siblingElement = this._el.nativeElement.nextElementSibling;
    if (siblingElement) {
      // 这里设置你想要的颜色，比如红色
      this.ren.setElementStyle(siblingElement, 'color', 'red');
    }
  }
}

模板用法示例： #

<!-- 指令绑定的元素 -->
<p dirNew>我是带自定义指令的元素</p>
<!-- 兄弟文本，会被指令设置颜色 -->
<p>我是兄弟文本，颜色会被自动修改哦</p>

二、下拉选择切换文本边框颜色 #

这个需求需要指令和组件做数据交互，我们用@Input接收下拉选中的颜色值，再通过OnChanges钩子监听颜色变化，动态更新边框样式：

第一步：更新指令代码 #

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

@Directive({ selector: "[dirNew]" })
export class dirNew implements OnInit, OnChanges {
  // 接收组件传来的选中颜色值
  @Input() borderColor: string;

  constructor(private _el: ElementRef, private ren: Renderer) {}

  ngOnInit() {
    // 保留第一个功能：设置兄弟文本颜色
    const siblingElement = this._el.nativeElement.nextElementSibling;
    if (siblingElement) {
      this.ren.setElementStyle(siblingElement, 'color', 'green');
    }
  }

  // 监听颜色值变化，实时更新边框
  ngOnChanges() {
    if (this.borderColor) {
      // 设置边框样式：2px实线 + 选中的颜色
      this.ren.setElementStyle(this._el.nativeElement, 'border', `2px solid ${this.borderColor}`);
    }
  }
}

第二步：组件端配置 #

首先，组件里要定义绑定的颜色变量，还要记得引入FormsModule（因为用到了ngModel双向绑定）：

组件类代码：

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
})
export class AppComponent {
  // 默认选中红色
  selectedColor: string = 'red';
}

组件模板代码：

<!-- 下拉选择器，双向绑定选中颜色 -->
<select [(ngModel)]="selectedColor">
  <option value="red">红色</option>
  <option value="blue">蓝色</option>
</select>

<!-- 使用自定义指令，传入选中的颜色值 -->
<p dirNew [borderColor]="selectedColor">我的边框会跟着下拉选择变颜色哦</p>

最后别忘了在AppModule里引入FormsModule：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms'; // 引入FormsModule

import { AppComponent } from './app.component';
import { dirNew } from './dir-new.directive'; // 引入你的自定义指令

@NgModule({
  declarations: [
    AppComponent,
    dirNew
  ],
  imports: [
    BrowserModule,
    FormsModule // 添加到imports数组中
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

这样两个功能就都搞定啦！第一个功能会自动给兄弟文本设置颜色，第二个功能选中下拉选项后，目标文本的边框会立刻切换成对应的颜色～

内容的提问来源于stack exchange，提问作者yepMe