Mon code,
<modal *ngIf='showModal' [imageValue]="imageId"></modal>
Mon composant de modèle,
@Component({
selector: 'modal',
templateUrl: './app/modal/modal.component.html',
providers: [HeaderClass]
})
export class ModalComponent {
imageValue:any;
Je veux obtenir la valeur de cette 'imageValue' mais je ne sais pas comment le faire. Quelqu'un peut-il m'aider, merci.
Si vous souhaitez envoyer des données à la directive, vous devriez essayer comme ceci:
Ceci est ma directive personnalisée, et je vais partager deux valeurs de composant ou HTML avec la directive.
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);
}
}
et maintenant votre directive a été créée et vous devrez l'ajouter dans votre app.module.ts
comme ci-dessous:
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 { }
Vous devrez utiliser votre directive dans votre html et envoyer des données à la directive comme dans le code ci-dessous.
J'envoie name
et value
au test.directive.ts
.
<div input-box [name]="'lightcyan'" [value]="'CYAN'"></div>
ou
<div input-box [name]="componentObject.name" [value]="componentObject.value"></div>
Maintenant, voyez la console ou utilisez les données dans la directive en conséquence.
Ceci est un exemple de la façon dont vous pouvez transmettre de la valeur à une directive
Directif
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>
Pour plus d'informations, regardez ce dépôt https://github.com/rahulrsingh09/AngularConcepts/tree/master/src/app/directives
Utilisez @input et transmettez la valeur du composant parent, où ce composant a été utilisé comme [imgval] = "val"