相关疑难解决方法(0)

我有一个父组件:

<parent></parent>

我想用子组件填充这个组:

<parent>
  <child></child>
  <child></child>
  <child></child>
</parent>

父模板:

<div class="parent">
  <!-- Children goes here -->
  <ng-content></ng-content>
</div>

儿童模板:

<div class="child">Test</div>

由于parent和child是两个单独的组件,他们的风格被锁定在他们自己的范围.

在我的父组件中,我尝试过:

.parent .child {
  // Styles for child
}

但.child样式没有应用于child组件.

我尝试使用styleUrls将parent样式表包含在child组件中以解决范围问题:

// child.component.ts
styleUrls: [
  './parent.component.css',
  './child.component.css',
]

但这并没有帮助,也尝试了另一种方式,即取出child样式表,parent但这也无济于事.

那么如何设置包含在父组件中的子组件的样式？

我在Angular 2中有一个名为my-comp的组件:

<my-comp></my-comp>

如何在Angular 2中设置此组件的主机元素的样式？

在Polymer中,您将使用":host"选择器.我在Angular 2中尝试过它.但它不起作用.

:host {
  display: block;
  width: 100%;
  height: 100%;
}

我也尝试使用组件作为选择器:

my-comp {
  display: block;
  width: 100%;
  height: 100%;
}

这两种方法似乎都不起作用.

谢谢.

我从HTTP调用中获取大量HTML代码.我将HTML块放在一个变量中并使用[innerHTML]将其插入到我的页面中,但我无法设置插入的HTML块的样式.有没有人有任何建议如何实现这一目标？

@Component({selector: 'calendar',
template: '<div [innerHTML]="calendar"></div>',
providers:[HomeService], 
styles: [` 
h3 {color:red;}
`})

我想要设置样式的HTML是变量"calendar"中包含的块.

我想根据组件级别而不是整个应用程序来改变primeng组件的样式,要么我必须更改主theme.css文件或内联样式中的样式,但似乎内联有时不能按预期工作让我们假设作为示例我必须使用

<p-dropdown [options]="cities" formControlName="selectedCity"></p-dropdown>

我必须ui-dropdown-item根据文档更改类类名称的样式.

我需要相同的组件与两个差异风格什么是最好的approcah相同？如果有人有工作的例子请添加链接.

当我将样式包含到组件中时,如下所示:

@Component({
    styleUrls: [
         "assets/plugins/test/css/style.css"
    ],
    encapsulation: ViewEncapsulation.None
})

例如,当样式包含对图像的引用时

.sample { background-image: url(../img/bg.jpg); }

浏览器尝试在基本URL(http://localhost/bg.jpg)上找到bg.jpg 而不是它,它应该在" http:// localhost/assets/plugins/test/img / "中搜索该图像.

当Angular2在style标记之间插入样式时会发生这种情况.是否可以改为使用Angular2 <link rel="stylesheet" href="..."/>？

更新1

Plunker:http://plnkr.co/edit/SHJzVHOyTuLu106r6tpD 打开浏览器开发者控制台并搜索"bg.jpg"

我正在尝试将样式应用于我的Angular 2应用程序中的ngbTooltip组件.我将指令应用为:

<div [ngbTooltip]="tooltipText">
    Element text
</div>

但是由于Angular 2应用了样式范围,我不能直接.tooltip在我的组件模板中设置类的样式.

如何为此特定组件提供自定义样式的工具提示？

编辑:

我有一个附加到我的组件的scss样式表.我的风格(简化)是:

.license-circle {
    width: 10px;
    ... other styles
}

/deep/ .tooltip {
    &.in {
        opacity: 1;
    }
}

但是我的渲染样式看起来像:

<style>
.license-circle[_ngcontent-uvi-11] {
  width: 10px; }

.tooltip.in {
  opacity: 1; }
</style>

这让我相信工具提示样式是未封装的(而不仅仅是刺穿这个组件的子代.

注意:我试过:host >>> .tooltip但它不起作用,所以我最终使用了/deep/.

谢谢!

我正在尝试<ng-content>使用内联css 进行样式,但似乎样式不适用于ng-content,我还需要为样式做些其他事情？

<ng-content class="red"></ng-content> <p class="red">hello</p>

这里的班级红色工作,p但不是

Working Example

我试图使用Webpack在Angular2中添加一个CSS文件的外部引用.我的css被定义为

{ test: /\.css$/, loader: "style-loader!css-loader" },

在我的webpack.config.js文件中,我可以在打字脚本文件的头部中加载css:

require("./styles/style.css");

但是,当我尝试在组件内部加载CSS文件时,如下所示:

@Component({
selector: 'todo-list',
template: `
            <section class="todoapp">                 
            </section>
`,
styles: [require('./Todolist.css')], // <--------------
directives: [TodoItem],
providers: [TodosService]
...

我得到一个错误:EXCEPTION:TypeError:s.replace不是一个函数

我还尝试通过以下方式加载CSS:

styles: [require('style-loader!css-loader!./Todolist.css')]

但没有太多运气

任何帮助表示赞赏

问候

肖恩

尝试在Angular 6组件中使用Leaflet.根据css文件的链接方式,地图显示确定或搞砸了,错误的图块不按正确的顺序排列,这意味着不考虑css.

我设法使用2个解决方案将css链接到应用程序级别(全局),但不仅仅是组件.这是我尝试过的(除了阅读有关css/leaflet/Angular的几篇文章):

工作 - 全球一级:

// styles.css
@import url("assets/lib/leaflet/leaflet.css");

工作 - 全球一级:

// index.html
<link rel="stylesheet" href="./assets/lib/leaflet/leaflet.css" type="text/css">

没用 - 全球一级:

// angular.json
"styles": [
    "src/styles.css",
    "src/assets/lib/leaflet/leaflet.css"
],

没用 - 组件级别:

// ...

import * as L from "../assets/lib/leaflet/leaflet.js";
import "../assets/lib/leaflet/leaflet-bing-layer.js";
import { BingHelper } from "../assets/lib/bing/bing-helper.js";

// -> importing the .css file here does not work

@Component({
    templateUrl: "./map.component.html",
    selector: "app-map",
    styleUrls: ["../assets/lib/leaflet/leaflet.css"] // -> does not work

    // -> also tried to put the content of the …

我有一个嵌套组件SearchBar作为我的标题的子.我的组件定义:

@Component({
  moduleId: module.id,
  selector: 'search-form',
  templateUrl: 'search-form.component.html',
  styleUrls: [ 'search-form.component.css']
})

search-form.component.html正在使用以下指令:

<tag-input placeholder="Add tags ..." 
    [(model)]="tagsArray" 
    (tagsChanged)="onTagsChange($event)"
    (tagsAdded)="onTagsAdded($event)"
    (tagRemoved)="onTagRemoved($event)"
    [delimiterCode]="[32]"></tag-input>

在search-form.component.html里面我有以下规则:

.ng2-tag-input-field {
    padding: 5px;
    border-radius: 6px;
    margin-right: 10px;
    direction: ltr;
    text-align: right;
}

除非我把CSS放在Styles.css文件中,否则CSS规则对嵌套指令没有影响.为什么这不能按预期工作？

我在另一个父应用程序的子目录中有一个 Angular 5 应用程序。

父应用程序是一组JSP，以及其他AngularJs应用程序...等等。

我想做的是将父应用程序中的 CSS 文件包含到 Angular 5 应用程序的组件中。

@Component({
  selector: 'app-my-form',
  templateUrl: './my-form.component.html',
  styleUrls: [....] //Here
})

是否可以 ？

我查看了这个问题：Load external css style into Angular 2 Component 已经问过，但它与我的情况不符。

感谢您的帮助

所以从Load外部css样式到Angular 2 Component似乎包括来自外部url的css通过将它放入styleUrls []为angular 2工作.虽然它不适用于Angular(它只是搜索目录下的css表) ).我找不到任何关于此的文档,所以我现在只是将其硬编码到整个index.html页面中.如何让它适用于单个组件？

编辑:澄清,通过外部CSS我的意思是这样的:https://www.w3schools.com/w3css/4/w3.css,而不是我的项目中包含的东西.