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

Question

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

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 未定义...

他有什么问题？？

提前感谢您的所有回答。

Answer 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时，变量还没有
实例化。

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

How to pass input parameter in an angular5 directive

angular-directive

angular5