Применить компонент к шаблону в Angular2

У меня есть простой компонент, использующий такой шаблон:

<span style="display:inline-block;" #control>Content here</span>

Затем на сайте вызова я играю со стилем:

<my-comp style="width:300px;"></my-comp>

... который абсолютно ничего не дает. Во время выполнения приведенное выше переводится следующим образом:

<my-comp style="width:300px;" class="ng-untouched ng-pristine ng-valid">
  <span style="display:inline-block;" #control>Content here</span>
</my-comp>

Поразительнй. На <my-comp> ширина игнорируется, а на <span>, где я хочу, она не применяется.

Я знаю, что могу сделать ширину свойством моего компонента, а затем применить ее в шаблоне, но мой вопрос шире: что, если я не хочу предписывать применяемый стиль? Есть ли способ, чтобы атрибуты с сайта вызова автоматически применялись к внешнему элементу шаблона?


typescript angular angular2-template
person Cobus Kruger    schedule 07.12.2016    source источник
comment
Не могли бы вы объяснить простыми словами, что именно вы хотите?   -  person micronyks    schedule 07.12.2016
comment
Не могли бы вы попробовать <my-comp style="width:300px;display:block;">. Если это не работает, пожалуйста, предоставьте плункер. Я не думаю, что это связано с Angular2, а с простой проблемой CSS.   -  person Günter Zöchbauer    schedule 07.12.2016
comment
@micronyks Это были мои простые слова :) Что вам показалось непонятным?   -  person Cobus Kruger    schedule 07.12.2016
comment
Слова не сложны для понимания. Для меня я не понимаю, что именно вы хотите. Это то, что я хочу знать, может быть, другими словами...   -  person micronyks    schedule 07.12.2016

Ответы (1)


arrow_upward
2
arrow_downward

пользовательский компонент отображается как inline в браузере, что означает, что вы не можете добавить к нему ширину, если вы не измените его положение (absolute / fixed) или не измените отображение (block / inline-block / flex / inline-flex).

Так что либо измените встроенный стиль (не одобряется), либо добавьте правило css в свой компонент:

@Component({
   selector : 'my-comp',
   template : `...`,
   styles : [`:host{display: inline-block}`]
})
export class MyCompComponent {}
person Poul Kruijt    schedule 07.12.2016