- Java 双重比较
- java - 比较器与 Apache BeanComparator
- Objective-C 完成 block 导致额外的方法调用?
- database - RESTful URI 是否应该公开数据库主键?
继续这个问题 SVG is not loaded with Angular 2 ,我将使用 SaSS 代码设计我的 SVG 图标。我制作了这段代码:
svg {
width: 200px;
}
问题发生在我编译这段代码的时候。编译器总是添加一个属性选择器。像这样:
svg[_ngcontent-noc-7] {
width: 200px;
}
当我重新加载页面时,noc
总是不同的。这是我的代码:
<div *ngFor="let item of achievements; let i = index" class="achievementscontainer">
<h3>{{item.name}}</h3>
<p>{{item.description.replace('%d', item.next)}}</p>
<div [innerHTML]="transform(item.image)" [class]="item.status"></div>
<p class="bold">Progress till next achievement:</p>
<p><span>{{item.progress}}</span>/<span>{{item.next}}</span></p>
</div>
import { Component } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';
@Component({
templateUrl: './profile.component.html',
styleUrls: ['./profile.component.scss']
})
export class ProfileComponent {
achievements = [
{
image: `<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 300 300" xml:space="preserve"><path class="st0" d="M194.5,101.5c10.3-10.8,16.6-25.4,16.6-41.4C211.1,26.9,184.2,0,151,0C117.9,0,91,26.9,91,60.1 c0,15.8,6.1,30.2,16.1,40.9c-33.7,10.4-58.4,41.8-58.4,78.8v84.8c0,19.4,15.9,35.3,35.3,35.3h129.6c20.7,0,37.7-17,37.7-37.7v-82.5 C251.3,143.4,227.4,112.4,194.5,101.5z"/></svg>`,
name: "Follower",
description: "Followed %d people",
progress: 6,
next: 35,
status: "brons"
}, {
image: `<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 300 300" xml:space="preserve"><path class="st0" d="M263.1,218.1l2.6-4.5l13.5,7.8c11.4-20.5,18.1-43.9,18.6-68.9H282v-5.2h15.7c-0.4-25-7-48.5-18.4-69l-13.7,7.9 l-2.6-4.5l13.7-7.9c-12.4-20.7-29.8-38.1-50.5-50.5l-7.9,13.7l-4.5-2.6l7.9-13.7c-20.5-11.4-44-18-69-18.4v15.7h-5.2V2.4 c-25,0.5-48.4,7.1-68.9,18.6l7.8,13.5L82,37.1l-7.8-13.5C53.6,36,36.3,53.4,23.9,74.1l13.4,7.7l-2.6,4.5l-13.4-7.7 C10,99,3.4,122.4,3,147.4h15.3v5.2H3c0.5,24.9,7.1,48.3,18.5,68.7l13.2-7.6l2.6,4.5l-13.2,7.6c12.4,20.6,29.7,37.9,50.3,50.3 l7.6-13.2l4.5,2.6l-7.6,13.2c20.4,11.3,43.8,18,68.7,18.4v-15.3h5.2v15.3c24.9-0.4,48.4-7,68.8-18.3l-7.7-13.3l4.5-2.6l7.7,13.3 c20.7-12.4,38-29.7,50.5-50.3L263.1,218.1z M228.1,55.1l-66.9,92.5c0.4,2.9,0,5.8-1.3,8.5l47.1,71.5c0.9,1.3,0.5,3.1-0.8,4l-8.4,5.6 c-1.3,0.8-3,0.5-3.8-0.8L146,163.7c-3.1-0.3-6.2-1.6-8.6-4c-5.5-5.5-5.5-14.3,0-19.8c3.6-3.6,8.6-4.8,13.2-3.7l65.1-90 c0.9-1.2,2.5-1.5,3.7-0.6l7.9,5.7C228.7,52.1,229,53.9,228.1,55.1z"/></svg>`,
name: "Tracker",
description: "Tracked %d series",
progress: 6,
next: 20,
status: "silver"
}, {
image: `<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 850 850" xml:space="preserve"><path class="st0" d="M477.6,400.4c-17.9,0-32.3-14.5-32.3-32.3c0-9.9,4.4-18.7,11.4-24.6c-9.8-3.8-20.4-6-31.6-6 c-48.4,0-87.6,39.2-87.6,87.6c0,48.4,39.2,87.6,87.6,87.6s87.6-39.2,87.6-87.6c0-13.7-3.2-26.6-8.8-38.1 C497.9,395.1,488.3,400.4,477.6,400.4z M425,258c-92.3,0-167.1,74.8-167.1,167.1S332.7,592.2,425,592.2s167.1-74.8,167.1-167.1 S517.3,258,425,258z M425.3,588.6c-90.3,0-163.4-73.2-163.4-163.4s73.2-163.4,163.4-163.4s163.4,73.2,163.4,163.4 S515.6,588.6,425.3,588.6z M0,424.2v1.8c241.2,234.8,621.4,234.8,850,0v-1.8C621.4,189.4,241.2,189.4,0,424.2z M839.5,425.8 c-222.8,228.9-593.3,228.9-828.5,0v-1.7c235.1-228.9,605.7-228.9,828.5,0V425.8z"/></svg>`,
name: "Watcher",
description: "Watched %d hours",
progress: 6,
next: 50,
status: "gold"
}
];
constructor(private sanitizer: DomSanitizer) { }
transform(html) {
return this.sanitizer.bypassSecurityTrustHtml(html);
}
}
如果代码加载到我的页面上,则没有 _ngcontent-noc-7
属性添加到 svg
标签。
所以我的问题是,当页面正在加载时,如何阻止从我的 SaSS 代码向 svg
选择器添加属性?对于这个站点,我使用 Angular 2。
最佳答案
试试这个:
@Component({
templateUrl: ...,
styleUrls: ...,
encapsulation: ViewEncapsulation.None
})
这是 the official doc .
关于angular - 防止将属性选择器添加到具有 Angular 2 的 SaSS 选择器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41415293/
你能比较一下属性吗 我想禁用文本框“txtName”。有两种方式 使用javascript,txtName.disabled = true 使用 ASP.NET, 哪种方法更好,为什么? 最佳答案 我
Count 属性 返回一个集合或 Dictionary 对象包含的项目数。只读。 object.Count object 可以是“应用于”列表中列出的任何集合或对
CompareMode 属性 设置并返回在 Dictionary 对象中比较字符串关键字的比较模式。 object.CompareMode[ = compare] 参数
Column 属性 只读属性,返回 TextStream 文件中当前字符位置的列号。 object.Column object 通常是 TextStream 对象的名称。
AvailableSpace 属性 返回指定的驱动器或网络共享对于用户的可用空间大小。 object.AvailableSpace object 应为 Drive 
Attributes 属性 设置或返回文件或文件夹的属性。可读写或只读(与属性有关)。 object.Attributes [= newattributes] 参数 object
AtEndOfStream 属性 如果文件指针位于 TextStream 文件末,则返回 True;否则如果不为只读则返回 False。 object.A
AtEndOfLine 属性 TextStream 文件中,如果文件指针指向行末标记,就返回 True;否则如果不是只读则返回 False。 object.AtEn
RootFolder 属性 返回一个 Folder 对象,表示指定驱动器的根文件夹。只读。 object.RootFolder object 应为 Dr
Path 属性 返回指定文件、文件夹或驱动器的路径。 object.Path object 应为 File、Folder 或 Drive 对象的名称。 说明 对于驱动器,路径不包含根目录。
ParentFolder 属性 返回指定文件或文件夹的父文件夹。只读。 object.ParentFolder object 应为 File 或 Folder 对象的名称。 说明 以下代码
Name 属性 设置或返回指定的文件或文件夹的名称。可读写。 object.Name [= newname] 参数 object 必选项。应为 File 或&
Line 属性 只读属性,返回 TextStream 文件中的当前行号。 object.Line object 通常是 TextStream 对象的名称。 说明 文件刚
Key 属性 在 Dictionary 对象中设置 key。 object.Key(key) = newkey 参数 object 必选项。通常是 Dictionary 
Item 属性 设置或返回 Dictionary 对象中指定的 key 对应的 item,或返回集合中基于指定的 key 的&
IsRootFolder 属性 如果指定的文件夹是根文件夹,返回 True;否则返回 False。 object.IsRootFolder object 应为&n
IsReady 属性 如果指定的驱动器就绪,返回 True;否则返回 False。 object.IsReady object 应为 Drive&nbs
FreeSpace 属性 返回指定的驱动器或网络共享对于用户的可用空间大小。只读。 object.FreeSpace object 应为 Drive 对象的名称。
FileSystem 属性 返回指定的驱动器使用的文件系统的类型。 object.FileSystem object 应为 Drive 对象的名称。 说明 可
Files 属性 返回由指定文件夹中所有 File 对象(包括隐藏文件和系统文件)组成的 Files 集合。 object.Files object&n
我是一名优秀的程序员,十分优秀!