html - 角度自定义css类未出现在视图中
问题描述
我正在研究 angular formio,因为我使用的是自定义 css 类,名称CustomCSS
我在 css 文件中添加了相同的名称,如下所示
这是堆栈闪电战
app.component.scss
.CustomCSS {
margin: auto;
width: 50%;
border: 3px solid rgb(1, 248, 1);
padding: 10px;
background-color: coral;
}
app.component.ts
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
ngOnInit() {
debugger;
this.triggerRefresh = new EventEmitter();
this.http.get('http://....')
.subscribe(
response => {
this.form = response.json();// this is my html script from DB
},
err => {console.error(err)}
);
}
}
app.component.html
<formio [refresh]="triggerRefresh" [form]="form" [submission]="submission" (submit)="onSubmit($event)"></formio>
我的 Htmlthis.form
脚本如下
{
"components":[
{
"label":"City",
"widget":"choicesjs",
"customClass":"CustomCSS",
"tableView":true,
"data":{
"values":[
{
"label":"abc",
"value":"abc"
]
},
"selectThreshold":0.3,
"calculateServer":false,
"validate":{
"required":true
},
"key":"city",
"type":"select",
"indexeddb":{
"filter":{
}
},
"input":true
},
{
"type":"button",
"label":"Submit",
"key":"submit",
"disableOnInvalid":true,
"input":true,
"tableView":false
}
],
"id":4
}
在我的脚本中,css 类名也可用,但它没有附加在视图中。
解决方案
使其在您的组件中工作的一种可能方法是修改该组件的样式封装。
import { Component, OnInit, ViewEncapsulation } from '@angular/core'; // <-- add ViewEncapsulation
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ],
encapsulation: ViewEncapsulation.None // <-- add this line
})
有关封装的更多信息。
话虽如此。
我仍然建议使用全局样式并实现 css 选择器来定位 formio 生成的 html 元素,例如您的示例:
#app formio .control-label {
font-weight: bold;
}
推荐阅读
- python - CentOS 6.9 上 python3.6.8 的 tensorflow 2.0 兼容的 GLIBC 版本是什么?
- ruby-on-rails - Rails 正在从 js.erb 渲染一个空的部分
- php - phpfmt php 格式化扩展错误: phpfmt: php_bin "php" is invalid
- r - 创建列出不同观察的列
- javascript - 2CheckOut - TwoCheckoutException:错误请求 - 参数错误
- jquery - Fullpage.js 卡片扩展 - 仅适用于第一张幻灯片
- c# - 尝试动态创建 zip 文件会导致 zip 文件损坏
- vue.js - 如何将带有 ref 的 vue 组件应用于孩子?
- graphics - 从简单/普通的背景中提取图像
- c# - HTTP POSTS 被丢弃