首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >错误TS2554:预期的3-4参数,但得到5

错误TS2554:预期的3-4参数,但得到5
EN

Stack Overflow用户
提问于 2019-06-10 07:15:03
回答 1查看 1.5K关注 0票数 0

我的指令出错了。我只是想显示颜色时,我悬停r文本。

better-highlight.directive.ts

代码语言:javascript
复制
import { Directive, OnInit, ElementRef, HostListener, Renderer2 } from '@angular/core';

@Directive({
  selector: '[appBetterHighlight]'
})
export class BetterHighlightDirective implements OnInit{

  constructor(private elRef: ElementRef, private rederer: Renderer2) { }

  ngOnInit() {
    // this.rederer.setStyle(this.elRef.nativeElement, 'background-color', 'blue', false, false);
  }

  @HostListener('mouseenter') mouseOver(eventData: Event) {
    this.rederer.setStyle(this.elRef.nativeElement, 'background-color', 'blue', false, false);
  }

  @HostListener('mouseenter') mouseleave(eventData: Event) {
    this.rederer.setStyle(this.elRef.nativeElement, 'background-color', 'transparent', false, false);
  }
}

basic-highlight-directive.ts

代码语言:javascript
复制
import { Directive, ElementRef, OnInit } from '@angular/core';

@Directive({
    selector: '[appBasicHighlight]'
})
export class BasicHighLightDirective implements OnInit {
    constructor(private elementRef: ElementRef) {

    }

    ngOnInit(){
        this.elementRef.nativeElement.style.backgroundColor = 'green';
    }
}

app.component.ts

代码语言:javascript
复制
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  oddNumbers = [1, 3, 5];
  evenNumbers = [2, 4];
  onlyOdd = false;
}

app.module.ts

代码语言:javascript
复制
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { BasicHighLightDirective } from './basic-highlight/basic-highlight-directive';
import { BetterHighlightDirective } from './better-highlight/better-highlight.directive';

@NgModule({
  declarations: [
    AppComponent,
    BasicHighLightDirective,
    BetterHighlightDirective
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.html

代码语言:javascript
复制
<div class="container">
  <div class="row">
    <div class="col-xs-12">
      <button class="btn btn-primary" (click)="onlyOdd = !onlyOdd">Show Numbers</button>
      <br><br>

      <ul class="list-group">
        <div *ngIf="onlyOdd">
          <li class="list-group-item" 
              [ngClass]="{odd: odd % 2 !== 0}" 
              [ngStyle]="{backgroundColor: even % 2 !== 0 ? 'yellow' : 'transparent'}"
              *ngFor="let odd of oddNumbers">
            {{ odd }}
          </li>
        </div>

        <div *ngIf="!onlyOdd">
          <li class="list-group-item" 
              [ngClass]="{odd: even % 2 !== 0}" 
              [ngStyle]="{backgroundColor: even % 2 !== 0 ? 'yellow' : 'transparent'}"
              *ngFor="let even of evenNumbers">
            {{ even }}
          </li>
        </div>
      </ul>

      <p appBasicHighlight>Style me with basic directive!</p>
      <p appBetterHighlight>Style me with a Better directive!</p>
    </div>
  </div>
</div>

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2019-06-10 07:19:48

你好,你用错了setStyle。

代码语言:javascript
复制
    this.rederer.setStyle(this.elRef.nativeElement, 'background-color', 'blue');

只有4个param不是5. https://angular.io/api/core/Renderer2#setStyle

摘要setStyle(el: any,样式: string,value: any,标志?:RendererStyleFlags2):void参数

[ 1]任何元素。

(2)样式字符串

风格的名字。

3]对任何新的价值进行估价。

4]可选的标志RendererStyleFlags2标志的样式变化。默认情况下不设置任何标志。

可选。默认值未定义。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/56522061

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档