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指令

1 个答案: