角度组件主机始终具有边框

Question

我有一个简单的Angular组件<app-mybutton>。一切都好，直到我通过设置css border-radius: 3rem;制作带圆角的按钮。圆角显示按钮主机（即<app-mybutton>）有边框。此边境业务发生在Chrome中，但不发生在Firefox中。我尝试了各种方法让边境消失，但无济于事。我试过以下 - （1）mybutton.component.css ... :host { border: none !important; outline: none !important;}

要么

（2a）mybutton.component.ts ...在@Component（{...}）中，添加行encapsulation: ViewEncapsulation.None;（2b）app.component.html ... <div class="btn-holder"><app-mybutton></app-mybutton></div>（2b）styles.css ... .btn-holder > * { border: none !important; outline: none !important;}

但上述两种方式都未能消除神秘的主机边界。边界的东西是Angular（我使用的是ver7）还是Chrome问题？任何帮助都将很高兴。

Answer 1

如果右键单击>检查chrome中的元素，将打开dev工具。将打开两个子窗口，一个带有元素选项卡，另一个带有样式。如果在元素窗口中选择，然后查看样式窗口，它应该显示按钮从哪里获得此边框。

Answer 2

...最后，经过大量艰苦，艰苦的侦探工作后，事实证明了神秘的原因：主机边界（不可能根除！）是由于...在mybutton.component.html和mybutton.component中使用变量命名类型.ts，如下图所示。 --- mybutton.component.html <app-mybutton [type]="'submit'"></app-mybutton>

--- mybutton.component.ts @Input() type = 'button';

必须说要给自己轻拍一下。