angular 相关问题

Angular 13，AppModule 中的自定义管道不能在子模块中使用

在我的 Angular 应用程序中，我有一个自定义管道，将其放在 AppModule 中的“声明”和“导出”中。我有一个子模块“HomeModule”，带有一个 HomeComponent。现在，我...

为什么我的 Angular 路由模块无法使用参数？

我有以下路由模块： 常量路线：路线= [ ]; @NgModule({ }) 当我在浏览器中直接进入 mywebsite/x 时，它工作得很好，但是，如果我进入 mywebsite/x-d/5 （任何 id ...

KeyCloak 节点 js 从 React/Angular 应用程序访问 API 时出现 CORS 错误

我已经在nodejs中添加了keycloak.json文件 { “领域”：“ABC”， "auth-server-url": "http://localhost:8080/auth", "ssl-required": "外部", “资源”：“AppShellService”， “凭据”：...

格式为 MM.yyyy 的 Angular 日期选择器想要选择日期

我想使用只接受月份和年份的日期选择器。根据 Angular Materials，我构建了一个函数，该函数应该在选择月份后关闭日期选择器 - 这样就不会出现任何一天...

Angular 2 Reactive Forms - 如何显示与输入元素不同的 FormArray 控件

我正在尝试将 FormArray 与输入元素以外的元素一起使用。我见过的大多数示例都使用输入元素作为动态呈现的对象。 在组件中我添加了 FormArra...

Mat 日期选择器发送了错误的日期

我有此输入用于选择日期 {{“日期”|翻译}} ...

如何使用@if @else

嗨，我正在尝试将我的代码指令从 Angular 16 转换为 Angular 17，但我无法了解如何在 Angular 17 中进行引用，以便对于其他两个指令，它将引用相同的 ng-template <...

我想更改特定组件/当前组件的区域设置

我正在开发一个 Angular 17 应用程序，我在其中实现了 i18n 以实现国际化。最初，我将阿拉伯语设置为整个应用程序的默认语言。现在，我需要切换到

在 Angular 17 中构建下拉菜单组件

我正在尝试创建一个放置在角度 17 的组件中的下拉菜单。我有一个导航栏，其中仅放置徽标，然后在右侧有组件： 这是 HTML： 我正在尝试创建一个放置在角度 17 的组件中的下拉菜单。我有一个导航栏，其中仅放置徽标，然后在右侧有组件： 这是 HTML： <div class="lang-btn"> <button class="change-lang" (click)="isClicked()"> <img src="../../../assets/navbar/it-button.png" alt="it-IT" class="lang-img" /> </button> </div> <div class="langs-btn" *ngIf="isOpen"> <ul class="lang-ul"> <li class="lang-li"> <button class="change-langs"> <img src="../../../assets/navbar/en-button.png" alt="en-UK" class="lang-img" /> <h6 class="lang">ENGLISH</h6> </button> </li> <li class="lang-li"> <button class="change-langs"> <img src="../../../assets/navbar/es-button.png" alt="es-ES" class="lang-img" /> <h6 class="lang">ESPAÑOL</h6> </button> </li> <li class="lang-li"> <button class="change-langs"> <img src="../../../assets/navbar/fr-button.png" alt="fr-FR" class="lang-img" /> <h6 class="lang">FRANÇAIS</h6> </button> </li> </ul> </div> 这是组件： import { Component } from '@angular/core'; import { CommonModule } from '@angular/common'; @Component({ selector: 'app-dropdown-lang', standalone: true, imports: [ CommonModule ], templateUrl: './dropdown-lang.component.html', styleUrl: './dropdown-lang.component.css' }) export class DropdownLangComponent { isOpen = false; isClicked() { this.isOpen = !this.isOpen } } 为什么没有按预期工作？ PS：如果您在 :hover 上注意到它们并未完全对齐。 px 是对的，但我不知道它为什么不够精确 我一开始尝试使用 bootstrap 但没有成功。我尝试将所有内容都放在 app.component 的导航栏中，但它也不起作用。 下午好， 我正在学习如何使用 ANGULAR，并且遇到了同样的问题：我正在使用 Bootstrap 5.3.3 开发 ANGULAR 17.2.0，并尝试使用 ng-bootstrap (16.0.0)。 这是我的文件所在的位置：https://github.com/Septenia/FilRouge/tree/FilRouge/ChocoPap。 我有以下代码，但它不起作用，我不明白为什么。你能帮忙吗？ 谢谢 import { Component, OnInit } from '@angular/core'; /* Import de ,Input, Output, EventEmitter, output ... */ import { CommonModule } from '@angular/common'; import { NgbModule } from '@ng-bootstrap/ng-bootstrap'; @Component({ selector: 'app-menu', standalone: true, imports: [CommonModule , NgbModule], templateUrl: './menu.component.html', styleUrl: './menu.component.css' }) export class MenuComponent implements OnInit{ pageAffichee: string = 'accueil'; public isCollapsed: boolean = false; constructor() {} ngOnInit() :void { } onAccueil() { this.pageAffichee ='accueil'; } onBoutique() { this.pageAffichee = 'boutique'; } onPanier() { this.pageAffichee = 'panier'; } onCollapse() { if (this.isCollapsed === true) { this.isCollapsed = false } else { this.isCollapsed = true } } } /* ************************************************************************************************* */ /* NAVBARRE */ /* ************************************************************************************************* */ #HMenu, .content{ background-color: var(--miel); display: flex; justify-content: space-between; opacity: 0.8; width: 100%; } #imenuToggle{ color : var(--caramel); font-size: 1.5em; border: none; } #HMenu img { height: 70px; margin: 20px; } #HMenu a:hover { color : var(--chocolatnoir); font-size : 18px; transition:0.4 ease-in-out; } /*Met en évidence le bouton du menu correspondant à la page affichée */ .active { font-size: 20px; font-family: 'Fjalla One'; margin-top: 10px; color : var(--pateasucre) !important; font-weight: bold; text-decoration: none; } #header-right { display: flex; align-items: center; } #header-right p { margin-left: 20px; } #panier{ font-size: 20px; margin-top: 10px; } /* ************************************************************************************************* */ /* AFFICHAGE POUR LES ECRANS DE TAILLE LG ET PLUS */ /* ************************************************************************************************* */ @media screen and (min-width:992px) { } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script> <!--HEADER BOOTSTRAP --> <header id="entetePrincipale" class="container-fluid m-0 p-0"> <!-- Barre de navigation --> <section id="HMenu" class="navbar navbar-expand-md m-0"> <!--Accessibilité--> <h1 class="accessibility">Menu Principal</h1> <p class="accessibility"><a href="#ContenuPrincipal" title="Accéder directement au contenu principal de cette page">Passer le menu</a></p> <!-- Navbar brand --> <a class="navbar-brand mt-2 mt-lg-0" href="accueil"> <img src="../assets/images/logo.png" alt="Choco PAP Logo"/> </a> <!-- Menu hamburger --> <button id="menuToggle" class="navbar-toggler position-fixed top-0 end-0 z-index-tooltip" type="button" (click)="isCollapsed = !isCollapsed" aria-controls="navbarSupportedContent" [attr.aria-expanded]="!isCollapsed" aria-label="Toggle navigation"> <span class="" role="button" title="Menu"><i class="fa fa-bars" id="imenuToggle"></i></span> </button> <!-- Liste des menus --> <nav role="navigation" [ngbCollapse]="isCollapsed" id="navbarSupportedContent"> <ul class="navbar-nav ms-auto mb-0 "> <li class="nav-item active text-style1"> <a class="nav-link m-0" aria-current="page" href="accueil">Accueil</a> </li> <li class="nav-item text-style1"> <a class="nav-link m-0" href="boutique">Boutique</a> </li> <li class="nav-item Panier"> <a class="nav-link m-0" href="panier">0 &nbsp;<i class="fa-solid fa-cart-shopping" id="panier"></i></a> </li> </ul> </nav> </section> </header>

如何显示故事书UI中使用的代码？

我有一个 FooComponent 的 Angular 故事书文件。 在故事书用户界面中，我似乎找不到 的代码片段。我该如何解决这个问题？ 是否有配置可以显示...

如何以角度反应形式重新验证

我有一个像这样的简单表格： 初始化登录表单（）{ 返回新的表单组({ 用户电子邮件：新的 FormControl('', { 验证器：[Validators.required，Validators.email]， 更新： 的...

如何使用独立组件启动 Angular 项目

现在 Angular 已经发布了独立组件，我可以只使用独立组件启动 Angular 并完全删除 NgModule 吗？

角度文本插值（双大括号）不起作用，变量的值不显示

我想显示学生的详细信息，但这些值没有显示在应用程序上。 组件： 从 '@angular/core' 导入 { Component, OnInit }; 从 '../student' 导入 { Student } ； 导入 {

在组件之间传递数据，其中之一是 Angular 中的 routerOutlet

我在仪表板组件内有类别和产品组件。我想将数据从类别组件传递到产品组件，但 ProductComponents 内部有 routerOutlet 。 ...

为什么 `ng build` 会将信息写入错误日志

当我运行例如生产构建 ng build --configuration production 时，Angular 会将一些信息写入错误日志： - 生成浏览器应用程序包（阶段：设置）... ✔ 兄弟...

如何防止隐藏图表图例上的图表栏单击

如何防止在角度应用程序中单击图表图例上隐藏绘图图表栏。 如何防止在角度应用程序中单击图表图例上隐藏绘图图表栏。 <plotly-plot [divId]="graph.selectedGraph.name" [data]="graph.selectedGraph.data" [config]="graph.selectedGraph.config" [layout]="graph.selectedGraph.layout" (relayout)="draggedShape($event)" [ngClass]="{ 'single-data': graph.data && graph.data.length === 1 }" (legendClick)="launchColorPicker($event); $event.stopPropagation()" > </plotly-plot> 您需要使用 Plotly 或 event.preventDefault() 禁用默认的 return false 行为，因此在您的 launchColorPicker 函数中。 launchColorPicker(event: any) { // Your code ... if (event) { event.preventDefault ? event.preventDefault() : (event.returnValue = false); } return false; }

Angular 15 - Checkmarx 扫描动态 html 标签失败

我正在尝试向 DOM 添加动态生成的 html 标签。 对于前。动态标签就像 - 。 调试后我发现 checkmarx 扫描失败...

导入自定义模块 [Angular 11] 时出现“无法读取未定义的属性‘ɵmod’”

我正在尝试制作一个自定义模块来保存我所有的 UI 组件，您可以在这里找到它：dawere-uic 它可以编译，并且与我的故事书一起工作就像一个魅力，每个 UI 组件都......

无法让手风琴工作

我无法让手风琴组件工作。我的 app.module.ts 中有这个： //ng2-引导程序 从“ng2-bootstrap”导入{ AccordionModule }； @NgModule({ 声明：[...]，

如何更改 Angular mat-checkbox 组件的标签字体大小？

我正在尝试更改 mat-checkbox 标签的字体大小。我似乎没有尝试任何工作，因为它始终被组件的默认样式覆盖： ！重要的 ::ng-深 设置...