Comment ajuster la largeur iframe en utilisant une entrée sur angular4?

Question

Je construis une nouvelle fonctionnalité qui permet aux utilisateurs de redimensionner un iframe en utilisant une entrée. J'ai un iframe dont je voudrais ajuster la largeur sur la base d'un input type="number". Je pense à le faire avec une approche directive

@Component({ 
    selector: "demo-iframe", 
    template: ` 
     <form> 
      <input type="number" [customPx]="`test`">px 
      <button type="submit">Adjust width</button> 
     </form> 
    ` 
}) 

export class DemoIframeCmp { 
    @Input() public customPx: string; 
    public ngOnInit() { 
     if (this.customPx) { 
      console.log('YES', this.customPx); 
     } else { 
      console.log('NOPE', this.customPx); 
     } 
    } 
} 

Mais je vois une erreur sur la console que mon entrée n'a pas customPx attr. Mes questions sont:

• Est-ce que Directive est une bonne approche?
• Y a-t-il une meilleure approche pour ma fonctionnalité?

Answer 1

Je pense, en utilisant la directive, dans ce cas, n'est pas une meilleure solution, mais vous pouvez le faire de cette façon en théorie. Bien sûr, vous obtenez une telle erreur dans la console, car l'élément d'entrée natif n'a pas d'attribut 'customPx'. Vous devez écrire directive avec le sélecteur de 'customPx'. À mon avis, il existe une approche meilleure et plus facile: vous pouvez utiliser les fixations bidirectionnelles d'angular. J'ai créé un Plunker pour cela. Il existe deux variantes pour obtenir les fonctionnalités dont vous avez besoin.

La première, comme je l'ai dit, est d'utiliser deux voies de liaison pour le redimensionnement iframe instantanée (as-you type, autrement dit):

Modèle:

<input [(ngModel)]="model.px">px 
<iframe [width]="model.px"></iframe> 

Composant:

@Component(/*...*/) 
class Blabla { 
    model = { 
    px: 10 
    } 
} 

La seconde est d'utiliser la soumission de forme classique avec la prévention du comportement d'événement par défaut pour redimensionner iframe seulement après que vous soumettez un formulaire:

Modèle:

<form #f="ngForm" (submit)="onSubmit($event)"> 
    <input [(ngModel)]="model.px">px 
</form> 
<iframe [width]="px"></iframe> 

Composant:

@Component(/*...*/) 
class Blabla { 
    model = { 
    px: 10 
    } 

    onSubmit(event: Event) { 
    event.preventDefault() 
    this.px = this.model.px 
    } 
}