Angular 5：从组件生成 DIV 而不是新标签

Question

我想知道在路由器出口中插入组件时是否有办法告诉 Angular 生成 DIV 而不是新标签。现在，我有这个组件代码：

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

@Component({
  selector: 'app-fwc-vpn-main',
  templateUrl: './fwc-vpn-main.component.html',
  styleUrls: ['./fwc-vpn-main.component.css'],
  encapsulation: ViewEncapsulation.None
})
export class FwcVpnMainComponent implements OnInit {

  numbers = new Array(35);

  constructor() { }

  ngOnInit() {
  }

}

在最终的 HTML 中呈现为：

<router-outlet></router-outlet>
<app-fwc-vpn-main class="ng-star-inserted"> ... </app-fwc-vpn-main>

我需要的是生成一个带有一些添加类的 div，所以最终结果将是这样的：

<router-outlet></router-outlet>
<div app-fwc-vpn-main class="grid-y medium-grid-frame"> ... </div>

注意：我需要添加grid-y和medium-grid-frame类，以便应用程序具有正确的布局。这是我想更改此 div 的插入标签的主要原因。

提前致谢，

Answer 1

在角度选择器中可以声明为以下之一：

• element-name：按元素名称选择。
• .class：按类名选择。
• [attribute]：按属性名称选择。
• [attribute=value]：按属性名称和值选择。
• :not(sub_selector)：仅当元素与 不匹配时才选择sub_selector。
• selector1, selector2：选择 或selector1是否selector2匹配。

因此，当 Angular 编译组件/指令元数据时，它会使用CssSelector解析选择器并保留所有解析的数据，例如：

[
  {
    "element": null,
    "classNames": [
      "grid-y",
      "medium-grid-frame"
    ],
    "attrs": [
      "app-fwc-vpn-main",
      ""
    ],
    "notSelectors": []
  }
]

Angular 路由器动态创建组件，因此我们的每个路由组件都将具有主机视图。对于主机视图，角度编译器根据从 CssSelector 收到的元数据准备模板：

/** Gets a template string for an element that matches the selector. */
getMatchingElementTemplate(): string {
    const tagName = this.element || 'div';
    const classAttr = this.classNames.length > 0 ? ` class="${this.classNames.join(' ')}"` : '';

    let attrs = '';
    for (let i = 0; i < this.attrs.length; i += 2) {
      const attrName = this.attrs[i];
      const attrValue = this.attrs[i + 1] !== '' ? `="${this.attrs[i + 1]}"` : '';
      attrs += ` ${attrName}${attrValue}`;
   }

   return getHtmlTagDefinition(tagName).isVoid ? `<${tagName}${classAttr}${attrs}/>` :
                                                  `<${tagName}${classAttr}${attrs}></${tagName}>`;
 }

https://github.com/angular/angular/blob/c8a1a14b87e5907458e8e87021e47f9796cb3257/packages/compiler/src/selector.ts#L91-L105

之后主机模板将如下所示：

<div class="grid-y medium-grid-frame" app-fwc-vpn-main></div>

因此，以下内容应该适合您：

selector: '[app-fwc-vpn-main].grid-y.medium-grid-frame',

例子