个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
29
4
引用这个plunker:
https://plnkr.co/edit/GWsbdDWVvBYNMqyxzlLY?p=preview
我在 styles.css 文件和 src/app.ts 文件中指定了相同的 css。
如果我在 styles.css 中的 css 中注释掉 src/app.ts 中的 css，它就可以工作。
样式.css:
/* If these are commented in, and the ones in src/app.ts are
* commented out, the three items are spaced appropriately. */
/***
md-toolbar-row {
justify-content: space-between;
}
md-toolbar {
justify-content: space-between;
}
***/
如果我在 styles.css 中注释掉 css 并在 src/app.ts 中注释掉 css，它会失败。
源/应用程序.ts:
@Component({
selector: 'my-app',
template: `
<div>
<h2>Hello {{name}}</h2>
<md-toolbar color="primary">
<span><md-icon>mood</md-icon></span>
<span>Yay, Material in Angular 2!</span>
<button md-icon-button>
<md-icon>more_vert</md-icon>
</button>
</md-toolbar>
</div>
`,
// If these are commented in, and the ones in style.css are
// commented out, the three items are scrunched together.
/***/
styles: [
`md-toolbar-row {
justify-content: space-between;
}`,
`md-toolbar {
justify-content: space-between;
}`
]
/***/
})
export class App {
name:string;
constructor() {
this.name = `Angular! v${VERSION.full}`
}
}
我无法想象为整个应用程序和特定组件定义 css 之间的区别。有人能告诉我这是怎么回事吗？
=================================
@bryan60 和@Steveland83 似乎表明问题出在 View 封装的某个地方。经过进一步调查，它在某种意义上确实如此。
如果您查看下面的代码，您会发现 md-toolbar 和 md-toolbar-row 的样式附加了一个属性。但是 md-toolbar 和 md-toolbar-row 的 html 不匹配。只有 md-toolbar 具有附加的属性。 md-toolbar-row 没有。我用>>>>>标记了相关的四行。
这就是问题所在，但是:
1. 我是否将其作为错误报告给 Material 设计人员？
2. 有没有我今天可以使用的解决方法？
<html>
<head>
:
<script src="config.js"></script>
<script>
System.import('app')
.catch(console.error.bind(console));
</script>
<link href="https://rawgit.com/angular/material2-builds/master/prebuilt-themes/indigo-pink.css" rel="stylesheet">
<style>
>>>>> md-toolbar-row[_ngcontent-c0] {
justify-content: space-between;
}
</style>
<style>
>>>>> md-toolbar[_ngcontent-c0] {
justify-content: space-between;
}
</style>
<style>
.mat-toolbar {
display: flex;
: :
.mat-mini-fab,
.mat-raised-button {
outline: solid 1px
}
}
</style>
</head>
<body class="mat-app-background">
<my-app _nghost-c0="" ng-version="4.4.0-RC.0">
<div _ngcontent-c0="">
<h2 _ngcontent-c0="">Hello Angular! v4.4.0-RC.0</h2>
>>>>> <md-toolbar _ngcontent-c0="" class="mat-toolbar mat-primary" color="primary" role="toolbar" ng-reflect-color="primary">
<div class="mat-toolbar-layout">
>>>>> <md-toolbar-row class="mat-toolbar-row">
<span _ngcontent-c0=""><md-icon _ngcontent-c0="" class="mat-icon material-icons" role="img" aria-hidden="true">mood</md-icon></span>
<span _ngcontent-c0="">Yay, Material in Angular 2!</span>
<button _ngcontent-c0="" class="mat-icon-button" md-icon-button=""><span class="mat-button-wrapper">
<md-icon _ngcontent-c0="" class="mat-icon material-icons" role="img" aria-hidden="true">more_vert</md-icon>
</span>
<div class="mat-button-ripple mat-ripple mat-button-ripple-round" md-ripple="" ng-reflect-trigger="[object HTMLButtonElement]" ng-reflect-centered="true" ng-reflect-disabled="false"></div>
<div class="mat-button-focus-overlay"></div>
</button>
</md-toolbar-row>
</div>
</md-toolbar>
</div>
</my-app>
</body>
</html>
最佳答案
Angular 的一个特性是View Encapsulation，这基本上意味着您可以定义仅作用于特定组件的样式，而不会影响任何其他组件。
默认情况下，样式的作用域仅适用于引用它们的组件，但您可以选择覆盖它，通过将组件封装设置为 None 来使它们全局可用。
例如
import { Component, ViewEncapsulation } from '@angular/core';
@Component({
selector: 'component-that-shares-styles',
templateUrl: './component-that-shares-styles.component.html',
styleUrls: ['./component-that-shares-styles.component.scss'],
encapsulation: ViewEncapsulation.None // <-- Set encapsulation here
})
*请注意，您需要从 @angular/core 导入 ViewEncapsulation
关于css - 我有一个笨蛋。当我在全局范围内定义我的 css 时，它起作用了。当我在我的组件中定义我的 css 时，它失败了。这是怎么回事？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46044320/
29
4
0
我有三个 td，并且正在尝试将每个内部的函数限制为仅该 td。我该怎么做呢？使用此代码，它会获取所有 3 个图像并将它们全部插入到 h2 之前: jQuery("td.frontpage_news")
这是所需的通用公式:if((b2-b1)=c1,True,False但是，我需要 b2-b1约等于 c1 , 在 5 内大约单位(在本例中为秒)。有没有可以处理这个的函数？ 最佳答案 你也可以试试这个
我有三个整数，作为命令行参数传入后赋值给变量。我想验证每个整数都在 1-5 范围内。有没有一种方法可以在不使用如下所示的 if 语句的情况下在 Java 中完成此操作？我想避免这样做(注意伪代码):
检查某个变量 X 是否在某个变量 Z 的 n 个数字之内的最简洁方法是什么。n 是任意定义的数字(即 3)。 所以我想要 if (z {something} x){ // run code i
我的顶级 build.gradle (Gradle 2.2) 中有类似的东西 ext.repo = "https://my-artifactory-repo" buildscript { re
我只是在我的 jsp 页面中进行随机技巧和测试。我想使用 Attributes 将 request 范围对象存储在 session 范围对象中。存储后，当尝试从请求属性中提取值(存储在 session
我正在使用 Spring 。我有一个外部化属性文件。我正在按如下方式加载它。 现在我如何将 session 中的属性作为键值对保存？ 我尝试编写一个扩展 ServletContextListene
我有以下范围: scope :billable, -> (range_start = nil, range_end = nil) { joins(:bids) .where("au
请看我的示例代码: var testObject = new SomeClass(); using (testObject) { //At this point how can the te
我目前在保持在 vector 范围内时遇到一些问题。 在下面的代码中，我试图检查正在检查的数字是否小于或等于它后面的数字 #include #include #include bool fun(
有人可以帮我解决下面的(简化的)代码吗？我试图从幻灯片事件函数中调用 doTheSlide() 函数。我对 JS 范围的理解仍然有点可疑。 实现这一目标的正确方法是什么？我收到此错误: Uncaugh
如何在 Swift 中检查时间是否在下午 6 点到晚上 11 点之间？我在使用 NSDateFormatter 时遇到了困难，我觉得一定有更简单的方法。 最佳答案 使用NSCalendar: let
我目前正在尝试创建一个 2D 横向滚动条，并且我目前有我的“世界”绘图(暂时是一个大白框)，但我无法弄清楚世界地图的边缘与边缘之间的任何关系确保视口(viewport)始终完全被 map 覆盖。 我的
我正在学习李普曼，而且我只是在学习。我在这里尝试编写一个代码，该代码将返回 vector 中的最小元素。当我在 Codeblocks 中编译我的代码时，它说:“模板声明不能出现在 block 范围内”
我有三个日期对象。我该如何比较它们才能确定它们之间的相对差异。 oldDate = newDate() - 5; midDate = newDate() - 2.5; newDate = newDat
我需要检查对象“objCR”是否存在于当前范围内。我尝试使用以下代码。 if(objCR == null) alert("object is not defined"); 让我知道哪里错了。 最佳答案
如何检查 IP 地址是否属于私有(private)类别？ if(isPrivateIPAddress(ipAddress)) { //do something } 如有
我正在开发一个 Firefox 插件，它可以转换用户通过用户选择突出显示的屏幕温度。转换后，用户选择将替换为 ID 为 alreadyconverted 的 span HTML 元素，其中包含原始温度
我正在开发一个邮资应用程序，该应用程序需要根据多个邮政编码范围检查整数邮政编码，并根据邮政编码匹配的范围返回不同的代码。 每个代码都有多个邮政编码范围。例如，如果邮政编码在 1000-2429、254
我正在使用 excel 范围进行连接:Set rng = Range("A1:A8")如果范围内的单元格之一为空，则会添加一个空格。 你如何阻止这个空间被添加？ 最佳答案 假设您在那些非空单元格中有常
我是一名优秀的程序员,十分优秀！