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

Posted 2023-02-22

【中文标题】如何在 angular5 指令中传递输入参数

【英文标题】：How to pass input parameter in an angular5 directive

【发布时间】：2018-07-20 23:28:24

【问题描述】：

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

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

他有什么问题？？

提前感谢您的所有回答。

【参考方案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 时，变量还没有 实例化。