当前位置: 首页 > 知识库问答 >
问题:

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

楚嘉胜
2023-03-14

我想知道在路由器插座中插入组件时,是否有办法告诉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>

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

注意:我需要添加网格-y中等网格框架,以便应用程序具有正确的布局。这就是我想更改此div的插入标记的主要原因。

提前感谢,

共有3个答案

章博耘
2023-03-14

创建指令而不是组件

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

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

翟冯浩
2023-03-14

然后将< code >选择器从:

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

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

然后你可以像< code >一样使用它

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

.app-fwc-vpn-main // <div class='app-fwc-vpn-main'></div>
#app-fwc-vpn-main // <div id='app-fwc-vpn-main'></div>

有关更多详细信息,请阅读:组件

伏默
2023-03-14

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

  • 元素名称:按元素名称选择
  • 。类:按类名选择
  • [属性]:按属性名称选择
  • [属性=值]:按属性名称和值选择
  • :不(sub_selector):仅当元素与sub_ selector不匹配时选择
  • selector1,selector2:选择selector 1selector 2是否匹配

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

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

Angular router动态创建组件,以便每个路由组件都具有主机视图。对于主机视图,angular编译器基于从CSS选择器接收的元数据准备模板:

/** 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',

 类似资料:
  • 我想按照这个答案从角度5迁移到角度6 我试着执行这三个命令,来更新。angular-cli.json到angular.json: 不幸的是,仍然没有angular.json。如果我试图运行< code>ng serve,我会得到以下错误: 所以我改名了。angular-cli.json到angular.json。但这并没有帮助: 架构验证失败,出现以下错误:数据路径“”不应具有其他属性(项目)。错

  • 我有一个列出用户的表格组件,其中有一个链接可以重定向到另一个组件来编辑记录。从表组件中,我调用细节组件,我想调用一个服务来获取用户记录。尽管我正确地传递了id参数,但我不确定从细节组件中读取它的正确方式是什么。 表组件: 在AppModule中注册路由器: 下面是我计划如何从细节组件调用服务: 同样,我的问题是如何从通过路由传递的组件中获取用户ID。欢迎任何帮助!

  • 我用spring boot和gradle制作了一个web服务。我的项目正在使用gradle。我必须做一个动态的web项目,集成UI和web服务。如何更新web服务,使其生成WAR文件而不是JAR文件??

  • 我正在尝试在其他模块中使用我在AppModule内部创建的组件。但我得到了以下错误: msgstr"未捕获(promise中):错误:模板解析错误: “联系人框”不是已知元素: 如果“触点盒”是一个角度组件,则确认它是该模块的一部分 如果“联系人框”是Web组件,则将“自定义元素”模式添加到“@NgModule”。“此组件的架构”以抑制此消息 我将我的页面保存在页面目录中,其中每个页面保存在不同的

  • 我有一个项目,起初我能够使用命令,但由于我已经实现了命令,当我遇到以下错误时,该命令不再起作用 错误:多个模块匹配。使用跳过导入选项跳过将组件导入最近的模块。多个模块匹配。使用跳过导入选项跳过将组件导入最近的模块。 我不太确定是不是导致了这一点,但这似乎是我所能做的,我需要修复它

  • 我有一个带有的组件和一个方法。 登录完成后,如何更新组件并再次执行Ngonit方法? 服务: