相关疑难解决方法(0)

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

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

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

import {Component} from 'angular2/core';

@Component({
    selector: 'my-app',
    template: '<div></div>',
    styleUrls: [
        'http://example.com/external.css',
        'app/local.css'
    ]
})
export class AppComponent {}

在external.css不加载.有没有办法在Angular 2组件中加载外部css？

有人可以解释ViewEncapsulation.Native, ViewEncapsulation.None和ViewEncapsulation.Emulated in angular2之间的区别.

我试着谷歌并阅读一些文章,但我无法理解其中的差异.

下面我有两个组件Home(home.ts),即父组件和MyComp(my-comp.ts).我想在父组件中定义正在子组件中使用的样式.

我应该使用ViewEncapsulation.Native还是ViewEncapsulation.None

home.ts

import {Component, ViewEncapsulation} from 'angular2/core';
import {MyComp} from './my-comp';
@Component({
  selector: 'home',  // <home></home>
  providers: [
  ],
  directives: [
    MyComp
  ],
  styles: [`
    .parent-comp-width {
       height: 300px;
       width: 300px;
       border: 1px solid black;
     }
    `],
  template:`
    <my-comp></my-comp>
    <div class="parent-comp-width"></div>
  `,
  encapsulation: ViewEncapsulation.Native
})
export class Home {
}

我-comp.ts

import {Component} from 'angular2/core';

@Component({
  selector: 'my-comp',  // <home></home>
  template: `
  <div class="parent-comp-width">my-comp</div>
  `
})
export …

我有一个父组件,里面有一个子组件.父组件有一些css类,其中子组件扩展它们.我尝试使用:host作为查看文档,但似乎无法让它正常工作.

子组件:

<div class="table-row body">
<div class="table-cell body-content-outer-wrapper">
    <div class="body-content-inner-wrapper">
        <div class="body-content">
            <div>This is the scrollable content whose height is unknown</div>
            <div>This is the scrollable content whose height is unknown</div>
            <div>This is the scrollable content whose height is unknown</div>
        </div>
    </div>
</div>

父组件:

         <div class="table container">
                 <div class="table-row header">
                        <button type="button" class="btn btn-info" data-toggle="collapse" data-target="#demo">Simple collapsible</button>
                        <div id="demo" class="collapse">
                            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                            Ut enim …

我有以下样式:

#right_content {
  padding: 30px 40px !important;
}

我把它存储在一个register.css绑定到我的文件中register.ts.

问题是它<div id="right_content">位于父模块中,这意味着我无法从内部直接修改其CSS属性register.ts.

<div id="right_content">
  <router-outlet></router-outlet>
</div>

我的register.html,register.css进入路由器插座.我想的样式#right_content从register.css.

有没有什么方法可以关闭视图封装(或者无论_ngcontent-mxo-3是否调用属性的添加),只是针对上述样式？

我正在尝试设置阴影DOM根的子元素.
这定义了一个名为的自定义元素element-el,它有一个span名为'x'的字母,其中包含字母x,我想要的,事情状态为红色.

class El extends HTMLElement {
    constructor() {
        super();
        var shadow = this.attachShadow({mode:'open'});
        shadow.innerHTML = '<span class="x">X</span>';
    }
}
customElements.define ('element-el',El);

我试过那些CSS样式:

element-el::slotted(.x) {
  color:red;
}
element-el::host .x {
  color:red;
}
element-el:host .x {
  color:red;
}
element-el::shadow .x {
  color:red;
}
element-el /deep/ .x {
  color: red;
}
element-el::content .x {
  color:red;
}

X不会变红.我正在使用Chrome 56,它应该支持这个......

我想在没有style在shadow DOM中放置元素的情况下设置样式.
这是一个codepen:http://codepen.io/anon/pen/OpRLVG？edit = 1111

编辑:
本文表明,它是可能的风格影儿从外部CSS文件-仅仅因为他们错了吗？

我有一个包含徽标，搜索栏和routeroutlet的搜索组件。搜索的执行导航到结果列表，这是此处概述的伪html：

<search>
  <logo></logo>
  <searchbar></searchbar>
  <result-list></result-list>
</search>

我想在结果页面上设置徽标和搜索栏的样式不同，因此我尝试使用来选择徽标，:host >>> logo并/deep/从result-list组件中选择徽标。那不行 有没有办法选择兄弟姐妹？

这里有一个小的plnkr来演示问题。http://plnkr.co/edit/Q0CLjcsftbqe0kHKrKks?p=preview在这里，我想从风格resultlist的logo和searchbar黑色。

我有这个引导标签

<ngb-tabset>
    <ngb-tab title="Tab 1">
        <ng-template ngbTabContent>
            Tab 1
        </ng-template>
    </ngb-tab>
    <ngb-tab title="Tab 2">
        <ng-template ngbTabContent>
            Tab 2
        </ng-template>
    </ngb-tab>
</ngb-tabset>

选项卡上的文本颜色为蓝色.我知道如果我创建全局样式,我可以覆盖默认值.但我想从父组件设置标签的样式

我知道我可以设置子组件的样式,但在这种情况下它不起作用(如何从父组件的css文件设置子组件的样式？).有什么建议？

styles: [
`
 :host { color: red; }

 :host ::ng-deep parent {
   color:blue;
 }
 :host ::ng-deep child{
   color:orange;
 }
 :host ::ng-deep child.class1 {
   color:yellow;
 }
 :host ::ng-deep child.class2{
   color:pink;
 }
`
],

在 Angular 5 应用程序中，当子组件位于下面的不同父组件列表中时，我希望它的样式略有不同。

例如列表组件下卡片的红色背景
列表详细信息组件下卡片的绿色背景

我想知道是否可以通过子组件中的scss来完成？因为我认为在子组件本身内部执行它会更容易跟踪。

<listing>
  <card />
<listing/>
<listingDetail>
  <card />
</listingDetail>

谢谢。

什么是从宿主组件覆盖子组件样式的正确方法。我尝试使用， encapsulation: ViewEncapsulation.None但是我需要在style.sass文件而不是主机组件中编写替代内容。什么是堆叠闪电战

如何覆盖由生成的第一个div上的CSS <mat-form-field>？

背景

我有一大堆领域的一个<mat-card>和最后一个领域是在卡的底部造成太大填充。

<mat-form-field id="this-feels-hacky-and-wrong"...>
    <!-- I want to remove the padding-bottom from this element -->
    <div class="mat-input-wrapper mat-form-field-wrapper">
      ...
    </div>
</mat-form-field>

在我stlye.css我放

#this-feels-hacky-and-wrong div{
  padding-bottom: 0;
}

可以，但是必须有更好/正确的方法来做到这一点，不是吗？

我希望有一个component.scss文件中的解决方案。

我创建了一个<nextgen-table></nextgen-table>基于Mat-table（角度材质）的共享组件（）。在项目中使用此组件时，发现我需要更改表列的行为（宽度）。

我已nextgen-table在其他组件中导出（假设 X, Y ），其中nextgen-table当然是子组件。

要更改 mat-table 特定列的宽度，我必须使用如下内容：

mat-cell:nth-child(1),
mat-header-cell:nth-child(1) {
    flex: 0 0 40%;
    text-align: left;
} 
mat-cell:nth-child(2),
mat-header-cell:nth-child(2) {
    flex: 0 0 20%;
}

上面的 CSS 代码是我在 X.component.css 中实现的，但我猜它是因为封装而无法工作。

经过一番搜索后，我找到了只需在 的 Component 装饰器中添加 即可正常工作的解决方案。在这个解决方案之后，我从组件 X 导航到组件 Y，其中我没有实现上述 CSS 代码。但是组件 Y 具有前两列，因为我只想要组件 X，但不知何故组件 Y 也具有我不想要的组件 Y。encapsulation: ViewEncapsulation.Nonex.component.ts

所以我的问题是如何nextgen-table从父组件更新仅适用于父组件而不适用于其他组件的样式。

我也尝试过使用

:host(mat-cell:nth-child(1)){
  flex: 0 0 40%;
  text-align: left;
}

:host(mat-header-cell:nth-child(1)) {
    flex: 0 0 40%;
    text-align: left; …