Узел углового компонента всегда имеет границу

Question

У меня есть простой угловой компонент <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 (версия 7, которую я использую) или Chrome? Любая помощь будет с благодарностью.

Answer 1

Если щелкнуть правой кнопкой мыши> осмотреть элемент в Chrome, откроются инструменты разработчика.Будут открыты два подокна, один с вкладкой элементов и стилями в другом.Если вы выберите в окне элементов, а затем посмотрите на окно стилей, оно должно показать, откуда кнопка получает эту границу.

Answer 2

... наконец, после многих изнурительных, кропотливых детективных работ выясняется причина загадочного: граница хоста (невозможно искоренить!) Была вызвана ... использованием переменной с именем type в mybutton.component.html и mybutton.component.ts, как показано ниже. --- mybutton.component.html <app-mybutton [type]="'submit'"></app-mybutton>

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

Должен сказать, чтобы похлопать себя по спине.