我想知道在路由器插座中插入组件时,是否有办法告诉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的插入标记的主要原因。
提前感谢,
创建指令而不是组件
<div app-fwc-vpn-main class="grid-y medium-grid-frame"> ... </div>
在这种情况下,app-fwc-vpn-main是指令。无需创建组件,您可以创建指令并呈现所需的模板。
然后将< 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>
有关更多详细信息,请阅读:组件
在角度选择器中,可以声明为以下之一:
元素名称
:按元素名称选择。类
:按类名选择[属性]
:按属性名称选择[属性=值]
:按属性名称和值选择:不(sub_selector)
:仅当元素与sub_ selector
不匹配时选择selector1,selector2
:选择selector 1
或selector 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方法? 服务: