Question

我正在构建一个新功能，使用户可以使用输入调整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);
       }
    }
}

但是后来我在控制台上看到一个错误，我的输入没有customPx attr。我的问题是：

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

Answer 1

我认为，在这种情况下，使用Directive并不是一个更好的解决方案，但你可以在理论上这样做。当然，你在控制台中遇到这样的错误，因为原生输入元素没有＆＃39; customPx＆＃39;属性。您必须使用＆＃39; customPx＆＃39;的选择器编写指令。

在我看来，有一种更好更简单的方法：你可以使用角度的双向绑定。我为此创建了Plunker。有两种变体可以获得所需的功能。

正如我所说，第一个是使用双向绑定来进行即时iframe调整大小（换句话说，就像你所说的那样）：

模板：

@SuppressWarnings("deprecation")
@Bean
WebMvcConfigurerAdapter configurer(){
    return new WebMvcConfigurerAdapter() {
        @Override
        public void addResourceHandlers (ResourceHandlerRegistry registry) {
            registry.addResourceHandler("/**").
                      addResourceLocations("classpath:/static/");
        }
    };
}

组件：

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

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

模板：

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

组件：

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

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

1 个答案: