Компонент и дополнение AngularJs

Я только что создал два фиктивных компонента в AngularJS 1.5, и у меня возникла проблема с моим CSS. В основном, здесь есть выход HTML:Компонент и дополнение AngularJs

<body> 
    <app number="5" class="ng-isolate-scope"><div class="app__button___ngX_w">The value is 10</div></app> 
    <price value="5" class="ng-isolate-scope"><span class="price__button___3-PzM">The price is 5€</span></price>  
</body>

два класса, определенные на «дивы» выглядит следующим образом:

.app__button___ngX_w { 
    width: 150px; 
    border-radius: 10px; 
    padding: 10px; 
    border:1px solid #3e3e3e; 
    background-color:#cecece; 
}

Вторая такая же, за исключением цвета фона. Тем не менее, конечный результат довольно неожиданный:

После моих исследований, я заметил, что если я применяю классы окружающей теге компоненты и измените его свойство «дисплей», чтобы «блок», он работает.

Однако я понятия не имею (и я даже не уверен, что это возможно), как изменить класс окружающего тега компонента, так что мой вопрос в том, как лучше всего избежать этого? Потому что это довольно распространенный сценарий ...

источник

2016-09-20 ssougnez

поведение соответствует спецификации HTML, так как <span> элемент display: inline по умолчанию.

Таким образом, вы можете достичь желаемого результата, либо изменяя ваш CSS

.price__button___3-PzM { 
    display: block; 
    ... 
}

или путем изменения <span> тег в <div>

html fiddle

Что касается повторное использование компонентов с угловым 1,5 вы можете:

Положитесь на свой поставщик или es6, чтобы ограничить включение css вашим компонентом.

Или вы также можете имитировать синтаксис ng2.component, указав свои стили непосредственно в объявлении шаблона.

.component('price', { 
     template: ` 
     <style> 
      .price__button___uuid { 
       background-color: teal; 
      } 
     </style> 
     <div class='price__button___uuid> Hello </div> 
     ` 
    })

angular fiddle

источник

2016-09-20 23:27:04 vilsbole

Ах! Спасибо ... Это была глупая ошибка от меня, «span» должен был быть «div». В любом случае, спасибо за более чем полный ответ ;-) – ssougnez

Это происходит потому, что неизвестные теги, такие как app и tags, отображаются как встроенные по умолчанию браузером. И тогда у вас есть элемент уровня блока внутри встроенного, который не разрешен спецификацией и, следовательно, может быть неожиданно отображен.

Вы можете исправить это следующим образом:

app, tags { 
    display: block; 
}

источник

2016-09-20 21:50:55 dfsq

Привет, это не решает проблему. Однако это нехорошее решение (без обид), потому что это означает, что компонент нельзя использовать независимо от приложения. Цель состоит в том, чтобы иметь компонент, который вы можете отбросить, где бы вы ни хотели и не ведете себя правильно (без необходимости применять внешний CSS) – ssougnez

@ssougnez, в то время как идея отбрасывания компонента где-то хорошо, ему все еще нужно css и угловое использование, такие элементы, как приложение и теги, вам нужно учитывать это.dfsq верен – Ronnie

Ну, я не сказал, что он не прав (я даже поддержал ответ), я сказал, что решение не оптимально. Проверьте принятый ответ, вы увидите, что мой код содержит глупую ошибку; если диапазон заменяется на div, компонент ведет себя корректно и может быть опущен почти всюду (я думаю, есть некоторые исключения для сложного CSS). – ssougnez

Компонент и дополнение AngularJs

ответ

Смежные вопросы