angular - 如何将值传递给 Angular Directive(指令)

Question

我的代码，

  <modal *ngIf='showModal' [imageValue]="imageId"></modal>

我的模型组件，

@Component({
  selector: 'modal',
  templateUrl: './app/modal/modal.component.html',
  providers: [HeaderClass]
})


export class ModalComponent  {
  imageValue:any;

我想获取这个“imageValue”的值，但我不知道该怎么做。谁能帮帮我。谢谢。

Answer 1

如果你想向指令发送数据，那么你应该这样尝试:

这是我的自定义指令，我将把组件或 HTML 中的两个值共享给该指令。

test.directive.ts:

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

@Directive({
    selector: '[input-box]'
})

export class TestDirectives implements OnInit {
    @Input() name: string;
    @Input() value: string;
    constructor(private elementRef: ElementRef) {
    }
    ngOnInit() {
        console.log("input-box keys  : ", this.name, this.value);
    }
}

现在你的指令已经创建，你将把这个指令添加到你的 app.module.ts 中，如下所示:

app.module.ts:

import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { TestDirectives } from '../directives/test.directive';


@NgModule({
  declarations: [
    AppComponent,
    TestDirectives
  ],
  imports: [],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

您必须在 html 中使用您的指令并将数据发送到指令，如下面的代码所示。

我正在将 name 和 value 发送到 test.directive.ts 。

<div input-box [name]="'lightcyan'" [value]="'CYAN'"></div>

或

<div input-box [name]="componentObject.name" [value]="componentObject.value"></div>

现在查看控制台或相应地在指令中使用数据。