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

时间:2018-03-05 12:19:27

标签: angular typescript

我想知道在路由器插座中插入组件时是否有办法告诉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-ymedium-grid-frame类,以便应用具有正确的布局。这是我想要更改此div的插入标记的主要原因。

提前致谢,

3 个答案:

答案 0 :(得分:3)

在角度selector may be declared中,作为以下之一:

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

因此,当angular编译组件/指令元数据时,它会使用CssSelector解析选择器并保留所有已解析的数据,如:

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

Angular路由器动态创建组件,因此我们的每个路由组件都将具有Host视图。对于Host视图角度编译器prepares模板,基于从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',

<强> Example

答案 1 :(得分:1)

然后更改alias dkill='docker kill $(docker ps -q)'

selector

selector: 'app-fwc-vpn-main',

然后您可以像selector: '[app-fwc-vpn-main]',

一样使用它
  

@Component选择器 - 用于标识a中此组件的css选择器   模板

     

所以你可以使用任何css选择器,比如

<div app-fwc-vpn-main></div>

有关详细信息,请参阅: Component

答案 2 :(得分:-1)

创建指令而不是组件

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

在这种情况下,app-fwc-vpn-main是指令。您可以创建指令并渲染所需的模板,而不是创建组件。