Javascript 如何使用类似angular-4.x中ng容器的选择器

我使用angular-4.x和inside component，我使用一些“abc”选择器，如下所示：

@Component({
  selector: "Abc",
  templateUrl: "Abc.html",
  styleUrls: [
    "Abc.css"
  ]
})

---

但是，“Abc”标记也存在于DOM中，但我希望它的行为像“ng container”一样，只在页面中反映子DOM，而不是标记本身。

这可能适用于您，也可能不适用于您，具体取决于用例

无论如何，选择器不必是标记选择器，也可以是属性选择器，这意味着不会在渲染输出中添加新标记

因此，如果您的组件具有以下元数据

selector: '[abc]',
template: `<ng-content></ng-content>`
styles: [`:host { background-color: red }`],

这意味着，在语义上，它仍然是一个按钮，即使它不是

元素

同样，可能适用于您的用例，也可能不适用于您的用例，但这是一个解决方案

---

否则，当前不可能创建一个满足您需要的组件。请关闭，但是您将无法应用样式，因为

样式

不是

@指令

的有效元数据

但是您可以通过注入

ViewContainerRef

和

TemplateRef

并在

OnInit

生命周期钩子中实例化模板来创建一个无操作结构指令

constructor(private templateRef: TempalteRef,
            vcr: ViewContainerRef) {
}

ngOnInit() {
  this.vcr.createEmbeddedView(this.templateRef)
}

但是，如果不希望呈现的元素封装其内容，则仍必须将其与

一起使用。因此，在这种情况下，您的请求“like

but different”并不能真正解决问题。

这些请求被调用，但在给定场景中仍将存在。。我需要angular-1.x自定义指令中的替换之类的内容

@HostBinding('role') role = 'button'

constructor(private templateRef: TempalteRef,
            vcr: ViewContainerRef) {
}

ngOnInit() {
  this.vcr.createEmbeddedView(this.templateRef)
}