Javascript 角度2+；属性组件-抑制的子元素

我有一个angular应用程序，其中我需要一个自定义视觉组件（带有模板）来抑制其自定义标记/元素。父应用程序的CSS在注入新组件元素时丢失。我相信这是一个常见的问题，我发现最好的建议是让组件有一个属性选择器

这似乎工作得很好，但我发现当添加带有属性选择器的组件时，容器元素内的其他元素将被抑制。这似乎是我做错了什么，或者这是属性选择器的已知限制

下面是显示场景的示例。我希望这是一个简单的新手错误

带有属性选择器的简单组件：

import { Component, Input } from '@angular/core';

@Component({
  selector: '[appAttrib]',
  template: `<span style="color:blue">outer level<span style="color:red"> {{title}}!</span></span>`,
  styles: [`h1 { font-family: Lato; }`]
})
export class AttribComponent  {
  @Input() title: string;
}

<hello name="{{ name }}"></hello>
<p>
  Start editing to see some magic happen :)
</p>

<!--This shows the use of the attribute component.  The component shows up, but the other items in the paragraph do not-->
<p appAttrib title="inner text here">
  Here is some paragraph text.  You won't see this.
  <span>here is some footer stuff.  You won't see this either.</span>
</p>

<!--This shows the same paragraph elements without the attribute component, which obviously will show up.-->
<p>
  Here is some paragraph text without the custom attribute.  You WILL see this.
  <span>here is some footer stuff.  You WILL see this too.</span>
</p>

从'@angular/core'导入{Component，Input}；
@组成部分({
选择器：“[appAttrib]”，
模板：`外部级别{{title}}！`，
样式：[`h1{font-family:Lato；}`]
})
导出类属性组件{
@输入（）标题：字符串；
}

使用组件，显示丢失的内容：

import { Component, Input } from '@angular/core';

@Component({
  selector: '[appAttrib]',
  template: `<span style="color:blue">outer level<span style="color:red"> {{title}}!</span></span>`,
  styles: [`h1 { font-family: Lato; }`]
})
export class AttribComponent  {
  @Input() title: string;
}

<hello name="{{ name }}"></hello>
<p>
  Start editing to see some magic happen :)
</p>

<!--This shows the use of the attribute component.  The component shows up, but the other items in the paragraph do not-->
<p appAttrib title="inner text here">
  Here is some paragraph text.  You won't see this.
  <span>here is some footer stuff.  You won't see this either.</span>
</p>

<!--This shows the same paragraph elements without the attribute component, which obviously will show up.-->
<p>
  Here is some paragraph text without the custom attribute.  You WILL see this.
  <span>here is some footer stuff.  You WILL see this too.</span>
</p>

开始编辑以查看发生的奇迹：）


下面是一些段落文本。你不会看到这个。
这是一些页脚的东西。你也不会看到这个。


下面是一些没有自定义属性的段落文本。你会看到这个。
这是一些页脚的东西。你也会看到这个。

您到底想做什么？我想你可以用指令来做。你正在用指令选择器创建一个组件，作为它的组件，内部HTML将被替换为你在模板中给出的内容。你可以看到，在我的例子中，指令（没有模板）会变得有点粗糙。我的组件中有一些元素，我不希望生成标记的类型脚本（如

document.createElement

）。早些时候有人评论了使用

封装的建议：ViewEncapsulation.None

。由于某种原因，该评论可能已被删除。也许这是一个选项，将组件保留为标准（非属性）选择器，但使用

viewenclosuration.None

。