angular 相关问题

关于Angular的问题（不要与AngularJS混淆），来自Google的Web框架。将此标记用于Angular问题，这些问题并非特定于单个版本。对于较旧的AngularJS（1.x）Web框架，请使用angularjs标记。

我有 Angular 代码，其中第一个字段在页面加载时需要焦点。挑战在于，输入根据条件动态显示，并且它们位于主组件和嵌套组件中。怎么...

angular input autofocus setfocus

回答 1 投票 0

我正在从服务进行http get 请求。 https://angular.io/guide/http-request-data-from-server 从 '@angular/common/http' 导入 { HttpClient }； @Injectable({ 提供于：'root' }) 出口类

angular typescript

回答 1 投票 0

Angular Google 与 ESlint 没有显式的任何

我们需要将 lint 规则添加到我们的 Angular 应用程序中。导致问题的具体规则是 no-explicit-any eslint 规则。 .eslintrc.json “@typescript-eslint/no-explicit-any”：&...

angular typescript eslint

回答 1 投票 0

Angular 不从资产加载图像

我正在制作一个角度应用程序，在资产内部创建了一个名为“image”的文件夹，并将图像放置在那里，然后在 html 组件中引用它们，但是在使用之后...

angular frontend

回答 1 投票 0

在 Angular 10 中显示 ng-content 两次

我正在使用自定义角度组件，我需要将投影内容显示两次。假设我有这个 html：我正在使用自定义角度组件，我需要将投影内容显示两次。假设我有这个 html： <app-awesome> <app-awesome-card *ngFor="let card of cards"> <h1>{{card.title}}</h1> <img [src]="card.thumbnail"> </app-awesome-card> </app-awesome> 所以，在awesome-card.component.html中，投影的内容将是一些我想投影两次的卡片组件。可能是这样的： <div class="awesome-class"> <ng-content select="app-awesome-card"></ng-content> </div> <div class="more-awesome-class"> <ng-content select="app-awesome-card"></ng-content> </div> 但这不起作用，因为 ng-content 只是“粘贴”模板，无法复制。即使我像这样使用 ng-template: <div class="awesome-class"> <ng-container *ngTemplateOutlet="content"></ng-container> </div> <div class="more-awesome-class"> <ng-container *ngTemplateOutlet="content"></ng-container> </div> <ng-template #content> <ng-content select="app-awesome-card"></ng-content> </ng-template> 这也行不通。我花了一周时间试图找到一个优雅的解决方案，但我找不到。只直接修改 DOM，但这是一个不好的做法。我见过一些类似的老问题，甚至有一个 Github 请求这个问题，但似乎当时没有人知道答案。 PD： ContentChild 也不会工作，因为它无法看穿投影内容（或我相信的东西）编辑如果我可以访问投影的内容信息，我可以手动渲染内容，但我尝试的一切都失败了我能提供的是传递一个模板而不是传递一段html <app-awesome> <ng-template> // or your own helper structural directive can be used. <app-awesome-card *ngFor="let card of cards"> <h1>{{card.title}}</h1> <img [src]="card.thumbnail"> </app-awesome-card> </ng-template> </app-awesome> @ContentChild(TemplateRef) contentTpl; ... <div class="awesome-class"> <ng-container *ngTemplateOutlet="contentTpl"></ng-container> </div> <div class="more-awesome-class"> <ng-container *ngTemplateOutlet="contentTpl"></ng-container> </div> 就我而言，我正在改造现有组件，并发现尝试根据视口选择不同输出并处理ng-content投影出最后一次出现的问题。 <div class="mobile"> ... <ng-content></ng-content>  </div> <div class="desktop"> ... <ng-content></ng-content>  </div> 要修复，我将最后/第二次出现替换为： <ng-container *ngTemplateOutlet="contentTemplate"></ng-container> 并在其后面添加了代码： @ContentChild(TemplateRef) contentTemplate: TemplateRef<any>; 同样，必须用 ng-template 将调用者中的内容包裹起来，例如： <app-custom-thing class="some-class"> <ng-template> Your content here! </ng-template> </app-custom-thing> 这具有允许先前使用而不用 ng-template 进行包装的效果，以继续像以前一样工作，而未来需要 ng-template 的使用将按预期呈现。好奇其他人是否有意见或替代方法来实施。谢谢！您需要一个 .上课前点 <ng-template #content> <ng-content select=".app-awesome-card"></ng-content> </ng-template>

javascript html angular typescript

回答 3 投票 0

将角度信号值设置为 HTML 选择选项

我有一个角度组件，它异步调用一些数据并将值存储在这样的信号上。 tipoSignal: WritableSignal = signal({}) as WritableSignal;

html angular typescript signals

回答 1 投票 0

导致 Angular 16 中同一组件呈现的项目之间导航失败的原因是什么？

我一直在使用 Angular 16、TypeScript 和电影数据库 (TMDB) 开发 SPA。我在开发电影搜索功能时遇到了一个奇怪的问题。在app\services\movie-service.service...

javascript angular typescript

回答 2 投票 0

Angular：tsconfig“composite”：true 标志不适用于 ng-workspace 中的库

我一直在努力实现这项工作，我有一个 NG16 工作区，但是每当我在 tsconfig.lib.json 中使用路径时，编辑器都不会识别这些路径，因为它不在主 tsconfig.json 中。然而...

angular tsconfig

回答 1 投票 0

如何将表单传递到 Angular Material 对话框

我需要创建一个可重用的表单对话框来可视化不同的表单。我正在使用 Angular 17 和 Angular Material。在我的组件中，我试图定义一个这样的表单：我需要创建一个可重用的表单对话框来可视化不同的表单。我正在使用 Angular 17 和 Angular Material。在我的组件中，我试图定义这样的形式： <form #myForm="ngForm" (ngSubmit)="submitForm(myForm)"> <mat-form-field> <input matInput [matDatepicker]="picker" placeholder="Choose a date" name="date" ngModel required> <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle> <mat-datepicker #picker></mat-datepicker> <mat-error *ngIf="myForm.controls.date.invalid && myForm.controls.date.touched">Please choose a date.</mat-error> </mat-form-field> <mat-form-field> <input matInput placeholder="First Name" name="firstName" ngModel required> <mat-error *ngIf="myForm.controls.firstName.invalid && myForm.controls.firstName.touched">Please enter a first name.</mat-error> </mat-form-field> <button mat-raised-button color="primary" type="submit" [disabled]="myForm.invalid">Submit</button> </form> 在我的 .ts 文件中，我有一个打开对话框的方法： @ViewChild('myForm', { static: true }) public myForm: ElementRef; public openDialog(): void { const dialogRef = this.dialog.open(FilterFormDialogComponent, { width: '460px', disableClose: true, autoFocus: false, panelClass: 'form-dialog', data: { form: this.myForm // reference to the form previously defined }, }); } 在我的filterFormDialogComponent中，我尝试使用ng-content在其html中可视化插入的表单。但是，我无法想象该表格。是否可以使用 MAT_DIALOG_DATA 将表单或其他组件传递到对话框中？如果是这样，如何将其正确显示到对话框的html中？您正在将 FormGroupDirective 传递到对话框。您可以尝试像这样在对话框数据中传递表单 form: this.ngForm.form

javascript angular dialog modal-dialog angular-reactive-forms

回答 1 投票 0

Angular 没有将 Oracle 中的数据加载到 HTML 中

我正在尝试使用本地 Oracle 数据库中的数据填充表。数据库在 TypeScript 中正确加载，并且提供数据，但不显示在 HTML 中。代码：应用程序.compone...

html css angular typescript oracle

回答 1 投票 0

TypeScript 返回类型双箭头（Observable）？

我对这个感到困惑： const loadData: (detailsStore: RecipeDetailsStore) => (source$: Observable) => Observable 我该如何解释这一点？我的

angular typescript rxjs

回答 1 投票 0

Angular2 模板中的干代码？

我喜欢在 Angular2 中轻松绑定属性、事件等的方式。您可以将 UI 相关代码放入 html 中并保持组件类非常干净。我有一个模板的片段，...