组件控制称为视图的屏幕补丁。组件装饰器允许您将类标记为Angular组件，并提供其他元数据，以确定如何在运行时处理，实例化和使用组件。
ViewChild 更改检测抛出 ExpressionChangedAfterItHasBeenCheckedError
我有自定义的 Angular 组件模态组件，它充当 MatModalDialog 的代理，并以 ngTemplateOutlet 作为 mat-dialog-content 的主体。 我有自定义的 Angular 组件 modal-component，它用作 MatModalDialog 的代理，其中 ngTemplateOutlet 作为 mat-dialog-content 的主体。 <mat-dialog-content class="modal-dialog-medium"> <ng-container *ngIf="dialogData.ngTemplateOutlet" [ngTemplateOutlet]="dialogData.ngTemplateOutlet"></ng-container> </mat-dialog-content> 我还有用于表单的自定义 Angular 组件 form-component - 输入表单和控件的一些配置。 这个 form-component 有 getter 方法 valid，它返回 boolean，表明 formGroup 是否有效。 提交按钮位于 form-component 外部 - mat-dialog-actions 内部，需要根据表单是否有效来禁用此按钮。这是通过注入的回调来确保的 MAT_DIALOG_DATA //this.matDialog.open(ModalComponent, {data: .... ngTemplateOutlet: this.formTemplate, okButtonDisabled: () => !this.formComponent?.valid <!-- modal-component --> <button-component (click)="dialogData.okButtonAction && dialogData.okButtonAction()" [disabled]="dialogData.okButtonDisabled && dialogData.okButtonDisabled()" [text]="dialogData.okButtonText || 'OK'"></button-component> 正如我所说，modal-component的主体是ngTemplateOutlet，所以我的模板看起来像这样： <ng-template #formTemplate> <form-component *ngIf="formFields" [config]="formConfig" [fields]="formFields" #formComponent (onSubmit)="submit()"></form-component> </ng-template> 参考元素： @ViewChild('formTemplate') formTemplate: TemplateRef<any>; @ViewChild('formComponent') formComponent: FormComponent; 当我调用 this.matDialog.open(...) 时，ngTemplateOutlet 渲染到视图中，并且 FormComponent.valid 返回 false。视图渲染后，FormComponent.formGroup被初始化并且FormComponent.valid变为true。这会在 Expression has changed after it was checked 上触发 [disabled]。 这些天我已经遇到过这个错误几次，并且我无数次地研究了更改检测和这个错误，试图找出如何实现一个不会触发此错误的干净解决方案，但我一直无法（我通过在 ngAfterContentChecked 中调用更改检测修复了 2 个类似的错误，但我无法在这里修复它，而且坦白说我不喜欢它）。 我错过了什么吗？还是我只是做错了？ 您可以只使用 static 的 ViewChild 属性，这将在设置为 true 时在更改检测运行之前评估视图子级，并可能消除错误！ 静态 true 表示在更改检测运行之前解析查询结果， false 表示在更改检测之后解析。默认为 false。 @ViewChild('formTemplate', { static: true }) formTemplate: TemplateRef<any>; @ViewChild('formComponent', { static: true }) formComponent: FormComponent;
在我的 Angular 应用程序中： 当组件使用在其直接父（抽象）类中定义的输入时，一切正常。 当组件使用在 2 级以上定义的输入时...
使用 Angular 代码动态地将 HTML 注入到现有 DOM 中
我在 Angular 应用程序中使用 Bootstrap Tables。要在单元格中呈现自定义按钮，我必须从 Angular 组件编写 HTML 代码，将 HTML 定义为字符串。然而这样一来，我就可以...
由于 Observable 订阅，Angular 组件未在浏览器中加载
在此组件中，当我在 ngOninit 中调用 getCurrentSalahOrIqamah 函数时，因此我的组件未加载到浏览器中。并保持卡住状态。 我尝试使用延迟加载的急切加载组件...
我在我的组件文件之一中创建了一个函数来重置表单（myform）： `onSubmit() { 如果（this.myform.valid）{ console.log("表单已提交！"); this.myform.reset(); } }` 它...
（单击）事件正在触发另一实例中的函数。我不知道如何解释这一点。我附上了一个 stackblitz 示例。 单击两个按钮都会打印相同的内容...
为什么 Angular 构造函数在 ngOnChanges 之前运行，即使它不是生命周期钩子的一部分？
我注意到，在 Angular 中，组件的构造函数在 ngOnChanges 钩子之前运行，尽管构造函数不被视为生命周期钩子的一部分。有人可以解释一下为什么吗...
所以在我的角度项目中，我有4个组件（comp1，comp2，comp3，comp4），我找到了一个形式的代码（html，css和js），我想把它放在comp1中，所以告诉我我是否'我是否正确：我是否将...
VS Code -> Angular：创建一个没有规范文件的新组件
各位开发者！ 我正在为我的 Angular (17) 应用程序使用 VS Code（最新版本）。 我可以右键单击一个文件夹并选择“新组件”选项来自动创建一个新的 Angular 组件...
通常，在将数据从子级传递给父级或从父级传递给子级时，我们使用@input和@output @input 和 @output 相对于主题或服务有什么好处，除了它是最有机的......
Angular 17 - ng build - dist 文件夹生成
我使用 Angular 17 工具开发了一个项目。这是在创建（构建） dist 文件夹期间为服务器和浏览器创建两组文件夹。但情况并非如此...
将对象的键值对作为单独的参数传递给 Angular 中的组件
假设我有一个组件，它接受三个输入 input1、input2 和 input3 导出类测试组件{ @Input() 输入1：字符串； @Input() 输入2：字符串； @Input() 输入3：字符串； .... ... }...
Angular 6 组件，将 css 应用到使用主机绑定应用的类？
我通常在我的应用程序中使用全局 SCSS 文件，但今天我想让一些 SCSS 仅限于我的组件。 我已经通过@HostBinding（class.card）在组件上设置了一个类。 我可以设计我的风格...
应用程序包生成失败。 [0.966 秒] X [错误] NG8001：“app-todos”不是已知元素： 如果“app-todos”是 Angular 组件，则验证它是否包含在“@Component”中。
每当用户单击不在其中的某个位置时，我都会尝试关闭我的侧边栏。我已经尝试过双向数据绑定，现在我正在尝试使用 rxjs 的主题 应用程序模板 每当用户单击不在其中的某个位置时，我都会尝试关闭我的侧边栏。我已经尝试过双向数据绑定，现在我正在尝试使用 rxjs' Subject 应用程序模板 <app-sidenav [openedSubject]="openedSubject"></app-sidenav> 应用程序组件 openedSubject = new Subject<boolean>(); @HostListener('click', ['$event']) clickedInside($event) { this.openedSubject.next(false); } SidenavComponent @Input() openedSubject: Subject<boolean>; @ViewChild('sidenav') sidenav: MatSidenav; ngAfterContentInit() { this.openedSubject.subscribe(opened => { if(this.sidenav.opened) opened || this.sidenav.toggle(); }); } toggle() { this.openedSubject.next(!this.sidenav.opened); } Sidenav模板 <mat-sidenav-container> <mat-sidenav #sidenav><mat-toolbar color="primary">Menu</mat-toolbar> </mat-sidenav> <mat-sidenav-content> <mat-toolbar color="primary"> <button (click)="toggle()">toggle</button> </mat-toolbar> </mat-sidenav-content> </mat-sidenav-container> https://stackblitz.com/edit/ng-sidenav-experiments 但是好像有逻辑错误。 click 事件 覆盖整个文档，但它应该排除侧边导航和工具栏。 成功了。问题是我对 HostListener 的使用，而我真的只想像这样 (click) ： <sidenav [openedSubject]="openedSubject"></sidenav> <fake-route-view (click)="dismissSidebar()"></fake-route-view> 完整工作版本：https://stackblitz.com/edit/ng-sidenav-experiments
我有一个演示应用程序，用于测试我创建的自定义库。我正在导入我的库并在演示应用程序中使用自定义组件，并且运行良好，但我无法获取子组件
您在 Dumb 组件中定义 FormGroup 以将相关数据保存在一起。然后，您需要在某些表单控件上使用异步验证器，但哑组件不应该有服务调用。一种选择是...
所以我有以下情况 我创建了一个角度库 ng 生成库 my-lib 我使用 Ng 生成组件 .lib/test 添加了一个简单的组件，它创建了一个独立的组件...
我有一个我依赖的 Angular 组件。这个组件有一个getData方法，那么在这个组件的模板中调用这个方法，并使用Angular interpolat显示结果...
目前我正在创建一个共享模块，在其中使用该材料，并且我能够在该模块的所有相关组件中使用 ng 材料的所有组件。然而现在我们有