如何在 angular5 指令中传递输入参数答案

【问题标题】：How to pass input parameter in an angular5 directive如何在 angular5 指令中传递输入参数
【发布时间】：2023-04-03 04:02:02
【问题描述】：

我正在尝试将输入参数传递给指令，但似乎组件没有传递它。代码如下：

app.component.html

<div appTest [test]="bbbb">AAAAA</div>

test.directive.ts

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

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

export class TestDirective {

    @Input() test: String;

    constructor(private el: ElementRef, private renderer: Renderer) { 
        if (this.test == "bbbb")
            renderer.setElementStyle(el.nativeElement,'backgroundColor','red');
    }

}

当我用 ngserve 运行代码时，背景色不是红色，但如果我注释 if 子句，背景色是红色。

在 chrome 开发者工具中我发现 this.test 是未定义的...

他有什么问题？？

提前感谢您的所有回答。

【问题讨论】：

标签： angular5 angular-directive

【解决方案1】：

您必须将测试值放在引号中，否则 Angular 将搜索名为 bbbb 的变量：

<div appTest [test]="'bbbb'">AAAAA</div>

或者你可以直接放一个变量，不用引号。

然后，在您的指令中，您必须实现 OnInit 并将您的构造函数代码放入其中：

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

public ngOnInit()
{
   console.log(this.test); // will print 'bbbb'
   if (this.test == "bbbb")
     renderer.setElementStyle(el.nativeElement,'backgroundColor','red');
}

当您在构造函数中使用test 时，变量还没有
实例化。

【讨论】：