javascript - 错误 TS2554:预期 3-4 个参数,但得到 5
问题描述
我的指令低于错误。当我将鼠标悬停在文本上时,我只想显示颜色。
更好的highlight.directive.ts
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);
}
}
基本高亮directive.ts
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
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
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
<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>
解决方案
您好,您使用 setStyle 错误。
this.rederer.setStyle(this.elRef.nativeElement, 'background-color', 'blue');
只有 4 个参数而不是 5 个。 https://angular.io/api/core/Renderer2#setStyle
抽象 setStyle(el: any, style: string, value: any, flags?: RendererStyleFlags2): void 参数
1] el any 元素。
2] style string 样式
的名称。
3] value any 新值。
4] 可选标志 RendererStyleFlags2 样式变化的标志。默认情况下不设置任何标志。
选修的。默认未定义。
推荐阅读
- r - R中分类的Model和$FinalModel之间的区别?
- php - 将 DOM createElement 中的两个变量相乘
- php - 调用带有引用的函数时,foreach 循环的行为异常(将一项替换为另一项)
- apache-kafka - Kafka 处理的生产者-消费者处理模式
- jquery - 如何找到具有相同属性值的所有xml节点
- android - 当孩子的身高不同时,均匀对齐gridview
- react-native - 世博账号登录超时
- sql - 如何使用 contains 来查找包含空格的关键字?
- c# - 访问 viewModel 中的行为属性
- javascript - Azure:通过主体 ID 获取用户电子邮件