web-dev-qa-db-ja.com

angularでディレクティブに値を渡す方法

私のコード、

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

私のモデルコンポーネント、

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


export class ModalComponent  {
  imageValue:any;

この「imageValue」の値を取得したいのですが、どうすればいいのかわかりません。誰でも助けてくれますか。ありがとう。

angulartypescriptangular-directive
16
Tracker

ディレクティブにデータを送信する場合は、次のようにしてください。

これが私のカスタムディレクティブであり、コンポーネントまたはHTMLからディレクティブに2つの値を共有します。

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>

コンソールを見るか、それに応じてディレクティブのデータを使用します。

27
Shubham Verma

これは、ディレクティブに値を渡す方法の例です

指令

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

    @Directive({
      selector: '[appConfirm]'
    })
    export class ConfirmDirective {

      //we can also add the attribute directive liek this [appconfirm] if the input in the directive has same name as appConfirm like
      //@Input() appConfirm:string; and then in component button we can use the directive like
      //<button type="button" [appConfirm] = "Rahul">Click to Send to Directive</button>
      @Input() value:string;

      @HostListener('click',['$event'])
      confirm(){
          const confirmed = window.confirm("Are you Sure ?");
          if(confirmed){
            window.alert("This is Value ["+this.value+"] Passed by the Component to the Directive")
          }
      }

  constructor() { }

}

ComponentTemplate.html

<button type="button" appConfirm value = "Rahul">Click to Send to Directive</button>

詳細については、このレポをご覧ください https://github.com/rahulrsingh09/AngularConcepts/tree/master/src/app/directives

2
Rahul Singh

@inputを使用して、このコンポーネントが[imgval] = "val"のように使用された親コンポーネントから値を渡します

1
RemyaJ