javascript - 如何在 angular-4.x 中使用类似于 ng-container 的选择器

Question

我正在使用 angular-4.x 和内部组件我正在使用一些“abc”选择器，如下所示：

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

但是“Abc”标签也存在于 DOM 中，但我希望它表现为“ng-container”，它只反映页面中的子 DOM而不是标签本身。

score 1 · Accepted Answer

这可能对您有用，也可能不适合您，具体取决于用例。

无论如何，您的选择器不必是标签选择器，它也可以是属性选择器，这意味着不会在呈现的输出中添加新标签。

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

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

而你这样使用它......

<div abc>
  <span>Hello <b>world!</b></span>
</div>

渲染的输出将是那样（没有<abc>添加标签）。

另一种可能的“解决方案”是使用 ARIA 为您的自定义元素分配角色。例如，如果你想<abc>成为一个按钮，你可以在课堂上做这样的事情。

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

这意味着，从语义上讲，它仍然是一个按钮，即使它不是一个<button>元素。

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

否则，目前不可能有一个组件可以满足您的需求。结构指令很接近，但是您将无法应用样式，因为styles对于@Directive.

但是您可以通过在生命周期钩子中注入ViewContainerRef和TemplateRef实例化模板来创建无操作结构指令。OnInit

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

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

<ng-container>但是，如果您不希望渲染元素封装其内容，您仍然必须将其与一起使用。因此，在这种情况下，您的请求“喜欢<ng-container>但不同”并没有真正削减它。

1 回答 1