angular 相关问题

我有一个像这样的简单组件： {{倒计时}} 我有一个像这样的简单组件： <div id="countdown"> <div id="countdown-number">{{ countDown }}</div> <svg> <circle #circle r="18" cx="20" cy="20"></circle> </svg> </div> 这是一个带有数字的圆圈倒计时。我还有一些 css，我在其中设置倒计时动画： svg circle { ... animation: countdown 5s linear forwards; } 它有效。现在，我想以这种方式创建 5s 变量，它来自组件。为此我尝试了不同的方法：在css中定义一个属性并修改它，f。例如： this.renderer2.setProperty( this.circle.nativeElement, ' - 时间'， ${this.time}s ); 组件中显示初始时间，然后递减，但动画不开始。我在元素 f 上设置了样式。例如： this.renderer2.setStyle( this.circle.nativeElement, '动画片'， countdown ${this.time}s linear forwards ); 运气不佳。第 3 个选项是，我定义一个简单的类，其中仅包含动画样式 f。例如： .start-animation { animation: countdown 5s linear forwards; } 我将其添加到元素 f 中。例如： this.renderer2.addClass(this.circle.nativeElement, 'start-animation'); 这将启动动画，但 5s 是硬编码的。那么，问题来了，如何解决这个问题呢？如何动态定义动画持续时间？这是我使用角度动画的解决方案，我们可以将输入传递给角度动画，该变量在 params 属性内保存倒计时持续时间，然后我使用类应用所有其他静态样式，并且可以使用分配动态属性{{countDown}}s，通过设置:increment和:decrement的过渡我们可以重新启动动画！ import { NgStyle } from '@angular/common'; import { Component } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { bootstrapApplication } from '@angular/platform-browser'; import 'zone.js'; import { provideAnimations } from '@angular/platform-browser/animations'; import { animate, keyframes, style, transition, trigger, } from '@angular/animations'; const stylesArr = [ style({ transform: 'scale(1)', offset: 0 }), animate( '{{countDown}}s', keyframes([ style({ transform: 'scale(1)', offset: 0 }), style({ transform: 'scale(0.5)', offset: 1 }), ]) ), ]; @Component({ selector: 'app-root', standalone: true, imports: [NgStyle, FormsModule], animations: [ trigger('animate', [ transition(':increment', stylesArr), transition(':decrement', stylesArr), ]), ], template: ` <div id="countdown"> <div id="countdown-number">{{ countDown }}</div> <svg> <circle #circle r="18" cx="20" cy="20" class="needed-styles" [@animate]="{ value:countDown, params:{ countDown:countDown, } }"></circle> </svg> </div> <input [(ngModel)]="countDown"/> `, styles: [ ` .needed-styles { animation-timing-function: linear; animation-delay: 0s; animation-iteration-count: 1; animation-direction: normal; animation-fill-mode: forwards; animation-play-state: running; animation-name: countdown; animation-timeline: auto; animation-range-start: normal; animation-range-end: normal; } `, ], }) export class App { animationToggle = false; countDown = 3; } bootstrapApplication(App, { providers: [provideAnimations()], }); Stackblitz 演示

css angular

回答 1 投票 0

我的 Angular 17 项目不运行脚本

我正在创建一个菜单，当我滚动时，它会改变颜色，当我运行应用程序时，脚本不会运行，我是 Angular 的新手，我不知道我是否做错了。我的html索引代码：我正在创建一个菜单，当我滚动时，它会改变颜色，当我运行应用程序时，脚本不会运行，我是 Angular 的新手，我不知道我是否做错了。我的html索引代码： <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Solticom</title> <base href="/"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" type="image/x-icon" href="favicon.ico"> <link href="https://unpkg.com/[email protected]/dist/aos.css" rel="stylesheet"> </head> <body> <app-root></app-root> <script src="https://unpkg.com/@popperjs/core@2"></script> <script> const navEl = document.querySelector('.navbar'); window.addEventListener ('scroll' , () => { if (window.scrollY > 56) { navEl.classList.add('navbar-scrolled'); } else if (window.scrollY <= 56) { navEl.classList.remove('navbar-scrolled'); } }); </script> </body> </html> 我的 html 菜单代码： <nav class="navbar navbar-expand-lg navbar-light fixed-top bg"> <div class="container"> <a class="navbar-brand" href="#"> <img src="assets/images/logo_sol_v1.png" width="310" height="auto" class="d-inline-block align-top img-fluid" alt=""> </a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse justify-content-center" id="navbarNavDropdown"> <ul class="navbar-nav "> <li class="nav-item"> <a class="nav-link active" aria-current="page" [routerLink]="['/home']" >Inicio </a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false"> Servicios </a> <ul class="dropdown-menu"> <li><a class="dropdown-item" href="#">Action</a></li> <li><a class="dropdown-item" href="#">Another action</a></li> <li><a class="dropdown-item" href="#">Something else here</a></li> </ul> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false"> Experiencia Laboral </a> <ul class="dropdown-menu"> <li><a class="dropdown-item" href="#">Proyectos relevantes</a></li> <li><a class="dropdown-item" href="#">Certificaciones</a></li> <li><a class="dropdown-item" href="#">Galería</a></li> </ul> </li> <li class="nav-item"> <a class="nav-link" href="#">Distribuidores</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Contacto</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Mesa de ayuda</a> </li> </ul> </div> </div> </nav> 我通过另一个我之前已经使用过的脚本意识到，我也没有运行AOS库，但通过研究我能够解决它。正如 browsermator 所写，不要将对 Angular 组件的 DOM 操作放在索引 html 文件中。那属于组件。当您致电时请考虑这一点： const navEl = document.querySelector('.navbar'); 浏览器只能看到这个 <app-root></app-root> 组件的实际内容尚未渲染，因此没有导航栏类的元素可供选择。如果您在组件内部（最好是在 OnInit 中）进行操作，Angular 将有时间实际创建您要定位的 DOM 元素。

javascript html angular

回答 1 投票 0

Angular 12 到 13 升级问题

我正在尝试将 Angular 12 升级到 13。但最终，我想升级到 v16，仅供参考。首先，我为 Angular 13 升级了 Angular/cli、Core、ngx-build-plus、Material、TypeScript 等。我...

angular

回答 1 投票 0

Angular ReadOnly 信号受到影响吗？例如通过数组.pop

为什么当我在信号商店（在服务中）时，当我这样做时服务 protected static readonly returnedAllowances：WritableSignal<(ContractAllowanceDTO)[]> = signal<(ContractAllowanceDTO}...

angular signals

回答 1 投票 0

Angular Service 从 Observable 返回布尔值

大局是我希望服务返回一个布尔值，因为我不希望消费者必须进行订阅/取消订阅。我希望他们调用 getBooleanFeatureToggle(toggleKey: string) 并重新...

angular

回答 1 投票 0

Ngx-Mask 将输入转换为十进制数

如何使用 ngx-mask 将输入转换为十进制数字，以便用户看到它，例如，123 变为 123.00，142.1 变为 142.10，73.30 仍为 73.00？我已经尝试过

html angular typescript ngx-mask

回答 1 投票 0

Angular：与循环内构造的属性名称进行属性绑定

我有多个房产 tier1_eligibility：FormControl； tier2_eligibility：FormControl； tier3_eligibility：FormControl；我想绑定以检查...

javascript angular

回答 1 投票 0

如何使 Angular 组件更通用以接受多种数据类型作为@Input？

我有一个组件，可以从后端获取数据，将其显示在表格中并允许用户进行选择。整个组件基于获取数据的类型，因此它受到强烈的限制

angular typescript types typescript-generics

回答 1 投票 0

如何设置 Ionic 组件的默认属性

我想设置 Ionic 组件的默认属性（与 Angular 11 一起使用）。示例：我不想重复所有标签的位置，并希望为 wh 强制执行有意义的默认值...

angular ionic-framework

回答 1 投票 0

部署在Tomcat服务器非根路径下的Angular应用程序无法加载资源

我将 Angular 应用程序打包在一个 war 文件中，并通过 URL http://localhost:8080/webc/ 将其部署在 tomcat 服务器上问题是当尝试通过 url http://

angular tomcat

回答 1 投票 0

如何更改弹出窗口的颜色

我构建了一个自定义弹出窗口，当我单击按钮时该弹出窗口可见。当我单击文档上的其他位置时，弹出窗口应该关闭/不可见。这效果很好。现在我想改变...

html css angular typescript

回答 1 投票 0

根据下拉选择计算输入字段的值

如果下拉值为 true，我会尝试将 50 添加到 TotalValue。紧急情况如果下拉值为 50，我会尝试将 true 添加到总值中。 <div class="col"> <label class="form-label">Emergency</label> <select class="form-select" name="emergency" id="emergency" [(ngModel)]="registration.emergency" (ngModelChange)="onEmergency()"> <option value="false">No</option> <option value="true">Yes</option> </select> </div> <div class="col"> <input type="number" class="form-control" name="totalValue" id="totalValue" [(ngModel)]="registration.totalValue" disabled> </div> 这是我的 Angular 17 .TS 文件： onEmergency(){ if(this.registration.emergency == true){ this.registration.totalValue = Number(this.registration.totalValue) + 50; console.log("clicked: any"); } console.log("clicked: yes"); } 当我在下拉列表中选择 true 时，没有任何反应。在控制台中，我只看到 clicked: yes。要解决此问题，您可以在输入字段上使用 ngModelChange 事件并更新那里的 totalValue 属性。以下是修改代码的方法：从输入字段中删除 disabled 属性，因为我们希望能够以编程方式更新其值。 <input type="number" class="form-control" name="totalValue" id="totalValue" [(ngModel)]="registration.totalValue" (ngModelChange)="updateTotalValue($event)"> 在 JavaScript 文件中，创建一个名为 updateTotalValue 的新方法，该方法将处理 ngModelChange 事件并根据 totalValue 值更新 emergency。 updateTotalValue(event: any) { if (this.registration.emergency) { this.registration.totalValue = event + 50; } else { this.registration.totalValue = event; } } 删除 onEmergency 方法，因为不再需要它。通过这些更改，当用户在下拉列表中选择“是”选项时，将使用输入字段的当前值调用 updateTotalValue 方法。如果registration.emergency为true，它将向输入值添加50并更新registration.totalValue属性。如果 Registration.emergency 为 false，它将简单地使用输入值更新 Registration.totalValue。这是更新后的代码： HTML： <div class="col"> <label class="form-label">Emergency</label> <select class="form-select" name="emergency" id="emergency" [(ngModel)]="registration.emergency"> <option value="false">No</option> <option value="true">Yes</option> </select> </div> <div class="col"> <input type="number" class="form-control" name="totalValue" id="totalValue" [(ngModel)]="registration.totalValue" (ngModelChange)="updateTotalValue($event)"> </div> JavaScript： updateTotalValue(event: any) { if (this.registration.emergency) { this.registration.totalValue = event + 50; } else { this.registration.totalValue = event; } } 通过这种方法，输入字段将根据紧急下拉列表选择更新其值，您应该看到预期的行为。

angular if-statement

回答 0 投票 0

为什么我的角度日期时间选择器在输入的箭头上添加增量/减量文本？

我不明白为什么我的角度项目中的日期时间选择器突然在时间输入的箭头上添加这些奇怪的文本行。它们似乎与增加/减少时间/...

angular increment datetimepicker timepicker decrement

回答 1 投票 0

@如果在 Angular 17 更新后未按预期工作

@if 未按预期工作在其 true 之外插入 isLoggedIn 但始终显示登录如果此实施有任何问题，请纠正我 @if(!isLoggedIn) { ...

angular

回答 1 投票 0

angular 相关问题

最新问题