Javascript 如何使用angular4上的输入调整iframe宽度？

我正在构建一个新功能，使用户能够使用输入调整iframe的大小。我有一个

iframe

，我想根据

input type=“number”

调整它的宽度。我想用一种指导性的方法来做这件事

@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);
       }
    }
}

@组件({
选择器：“演示iframe”，
模板：`
二甲苯
调整宽度
`
})
导出类DemoIframeCmp{
@Input（）public customPx:string；
公共ngOnInit（）{
如果（此.customPx）{
console.log（'YES'，this.customPx）；
}否则{
console.log（'NOPE'，this.customPx）；
}
}
}

但是我在控制台上看到一个错误，我的输入没有

customPx

attr。我的问题是：

• 指令

  是一个好方法吗
• 我的功能有更好的方法吗

---

我认为，在这种情况下，使用指令并不是一个更好的解决方案，但从理论上讲，您可以这样做。当然，在控制台中会出现这样的错误，因为本机输入元素没有“customPx”属性。必须使用“customPx”选择器写入指令
在我看来，有一种更好更简单的方法：可以使用angular的双向绑定。 我已经为此创建了一个。 有两种变体可以获得所需的功能
正如我所说，第一种方法是使用双向绑定来即时调整iframe的大小（换句话说，在键入时）：
模板：

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

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

第二种方法是使用经典表单提交，防止默认事件行为，仅在提交表单后调整iframe的大小：
模板：

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

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

---

我认为，在这种情况下，使用指令并不是一个更好的解决方案，但在理论上可以这样做。当然，在控制台中会出现这样的错误，因为本机输入元素没有“customPx”属性。必须使用“customPx”选择器写入指令
在我看来，有一种更好更简单的方法：可以使用angular的双向绑定。 我已经为此创建了一个。 有两种变体可以获得所需的功能
正如我所说，第一种方法是使用双向绑定来即时调整iframe的大小（换句话说，在键入时）：
模板：

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

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

第二种方法是使用经典表单提交，防止默认事件行为，仅在提交表单后调整iframe的大小：
模板：

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

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