在较高的层次上，指令是DOM元素上的标记（例如属性，元素名称，注释或CSS类），它告诉Angular 2+框架将指定的行为附加到该DOM元素，甚至转换DOM元素及其元素儿童。此标记适用于Angular 2+
Angular 17 中的声明式控制流 |如何在 Angular 17 中实现 @If @else @switch
为了让前台更加美观且易于理解，我实现了声明式的控制流语法。 @如果（显示）{ 我是可见的。 } @别的 { 我是隐藏的。 } 对于
ng如果不工作。即使我这样做 *ngIf="true" 它也不会显示， *ngIf="false" 也不会显示
如果某个变量为空，我想隐藏一个div，但是即使我直接分配true，*ngIf也不起作用。 树组件.ts 从 '@angular/core' 导入 { Component, OnInit }; 从 '../model/
cdkDropListSortingDisabled 属性无法绑定，因为它是 cdkDropList 指令的未知属性。有角材料
所以我想实现一个用例，我想使用拖放将一些数据从一个区域（div）复制到另一个区域，我通过在网上冲浪发现Angular/Material2可以完成这项工作，通过消费...
我在 Angular 中有这个简单的指令来计算嵌套数组： 从 '@angular/core' 导入 { AfterViewInit, Directive, Input, OnDestroy }; @指示（{ 选择器：'[rhsNestedArrayCounter]'，
我正在开发一个 Angular 项目，我需要创建一个按钮组件，该组件可以根据用例充当锚点 () 或按钮 ()。我想要灵活性... 我正在开发一个 Angular 项目，我需要创建一个按钮组件，该组件可以根据用例充当锚点 (<a>) 或按钮 (<button>)。我希望能够根据按钮组件的属性灵活地动态生成 HTML。 这是我迄今为止尝试过的： // Initial attempt import { Component, Input } from '@angular/core'; import { CommonModule } from '@angular/common'; import { Color, Corner, Size, Variant } from 'src/app/type/core'; import { NgIconComponent } from '@ng-icons/core'; @Component({ selector: 'mr-button', standalone: true, imports: [CommonModule, NgIconComponent], templateUrl: './button.component.html', styleUrls: ['./button.component.scss'], }) export class ButtonComponent { @Input() color: Color = 'primary'; @Input() size: Size = 'md'; @Input() corner: Corner = 'md'; @Input() variant: Variant = 'solid'; @Input() fluid: boolean = false; @Input() icon!: string; @Input() isLoading: boolean = false; } // this is the component HTML file <button [ngClass]="{ btn__fluid: fluid }" class="btn btn__{{ variant }} u_{{ color }} corner__{{ corner }} u_singleline" > <ng-container *ngIf="isLoading; else buttonContent"> <span>Loading...</span> </ng-container> <ng-template #buttonContent> <ng-icon *ngIf="!!icon" strokeWidth="1.5" [name]="icon"></ng-icon> <span class="btn--text"><ng-content></ng-content></span> </ng-template> </button> // And this how I call the component <mr-button variant='solid'>Hello world</mr-button> // Second attempt import { Input, Directive, HostBinding } from '@angular/core'; import { Color, Corner, Size, Variant } from 'src/app/type/core'; @Directive({ selector: '[mr-button]', }) export class ButtonComponent { @Input() @HostBinding('class') hostClasses: string = 'btn u_singleline'; @Input() icon!: string; @Input() set size(value: Size) { value = value ?? 'md'; this.hostClasses = this.updateHostClasses( this.hostClasses, `size-${value}` ); } @Input() set color(value: Color) { value = value ?? 'primary'; this.hostClasses = this.updateHostClasses(this.hostClasses, `btn_${value}`); } @HostBinding('btn__fluid') @Input() fluid = false; @Input() set corner(value: Corner) { value = value ?? 'md'; this.hostClasses = this.updateHostClasses( this.hostClasses, `corner-${value}` ); } @Input() set variant(value: Corner) { value = value ?? 'solid'; this.hostClasses = this.updateHostClasses( this.hostClasses, `btn__${value}` ); } private updateHostClasses(existingClasses: string, newClass: string): string { return `${existingClasses} ${newClass}`.trim(); } // ... } 这样它解决了我的问题，但我现在遇到的新问题是当我想调用组件时，我需要从头开始 // And this how I call the component <button mr-button variant='solid'> <ng-icon *ngIf="!!icon" strokeWidth="1.5" [name]="icon"></ng-icon> <span class="btn--text"><ng-content></ng-content></span> </mr-button> // And this with the loading <button mr-button variant='solid'> <mr-spinner></mr-spinner> <span class="btn--text">Loading...</span> </mr-button> 我怎样才能在第二次尝试中获得与第一次尝试相同的好处？ 任何有关如何解决此问题的指导或示例将不胜感激。谢谢！ 我希望按钮组件接受锚点或按钮元素 为什么不在组件上使用相同的选择器思想？ @Component({ selector: 'a[mr-button], button[my-button]', standalone: true, imports: [CommonModule, NgIconComponent], templateUrl: './button.component.html', styleUrls: ['./button.component.scss'], }) 这也有效！
当我像在 div 中一样渲染组件时，它们会水平对齐，这是通过将 flexbox 容器类添加到存储它们的 div 来指定的。 当我像在 div 中一样渲染组件时，它们会水平对齐，这是通过将 flexbox 容器类添加到存储它们的 div 来指定的。 <div class="flexbox-container" > <app-card></app-card> <app-card></app-card> <app-card></app-card> </div> 这是CSS： .flexbox-container{ display: flex; justify-content: center; } 但是，当我向这些组件添加输入属性并使用循环来显示它们时，它们会堆叠在一起。 <div class="flexbox-container" *ngFor="let title of titles" > <app-card title={{title}}></app-card> </div> 我的问题是如何更改此设置，以便我的组件像以前一样水平对齐，而不是垂直对齐？ 那是因为您在错误的位置添加了 ngFor 。您编码的方式是创建 4 个 div 并在每个 div 中放置一个元素。代码应该是 <div class="flexbox-container"> <app-card *ngFor="let title of titles" title={{title}}></app-card> </div> 如果有帮助，请标记为答案。快乐编码:)
在一个较大的项目中，我使用的组件库包含以下指令： @指示（{ 选择器：'bs-navbar-item > li > a' // 下面的选择器也不能很好地工作（doe...
当我像在 div 中一样渲染组件时，它们会水平对齐，这是通过将 flexbox 容器类添加到存储它们的 div 来指定的。 当我像在 div 中一样渲染组件时，它们会水平对齐，这是通过将 Flexbox 容器类添加到存储它们的 div 来指定的。 <div class="flexbox-container" > <app-card></app-card> <app-card></app-card> <app-card></app-card> </div> 这是CSS： .flexbox-container{ display: flex; justify-content: center; } 但是，当我向这些组件添加输入属性并使用循环来显示它们时，它们会堆叠在一起。 <div class="flexbox-container" *ngFor="let title of titles" > <app-card title={{title}}></app-card> </div> 我的问题是如何更改此设置，以便我的组件像以前一样水平对齐，而不是垂直对齐？ 那是因为您在错误的位置添加了 ngFor 。您编码的方式是创建 4 个 div 并在每个 div 中放置一个元素。代码应该是 <div class="flexbox-container"> <app-card *ngFor="let title of titles" title={{title}}></app-card> </div> 如果有帮助，请标记为答案。快乐编码:)
在路由到不同的组件时如何不使用 autofocus 指令显示表单错误消息？
我正在使用 PEAN 堆栈（即 PostgreSQL - ExpressJS - Angular - NodeJS）构建一个身份验证应用程序。 我有一个自动对焦指令如下： 自动对焦指令.ts 导入 { 指令，
我正在开发一个使用 Angular (v16) 作为框架的 Web 应用程序。 我对 Angular 初始化组件数据的方式有一些问题。我经常定义需要某些数据的组件...
我有一个 ngForm，它有多个按钮，除了提交表单的按钮外，每个按钮都有 diff 操作，例如，简单地更改用于 *ngIf 条件检查的状态。然而，每次...
Angular10 属性指令模拟不起作用。尝试获取模板中的元素：无法读取 null 的属性（读取“nativeElement”）
我正在尝试使用 Angular 10 在我的 jasmine 单元测试中模拟指令。该指令根据输入评估条件，并根据条件渲染或不渲染模板。
我有这些组件，我还附加了代码。 A. 添加按钮 B. 添加任务 C. 标题 D. 列出任务。 以及一个服务 MSGSERVICE，通过它添加按钮流更新并添加任务订阅到
我定义了一个数组，其中包含将出现在导航栏中的标签和图标名称列表，然后在 html 中我使用 Angular 材质循环遍历列表以显示所有标签...
我能否以 `myDirective('p')` 的形式创建一个 Angular 结构指令，将值从 HMTL 视图传递给指令？
我正在制作一个 HTML 视图模板，其中每个按钮对应国际音标 (IPA) 的 28 个元音和 59 个辅音。每个按钮将如下所示： 我正在制作一个 HTML 视图模板，其中每个按钮对应国际音标 (IPA) 的 28 个元音字母和 59 个辅音字母。每个按钮看起来像这样： <button [ngStyle]="style_p()" (click)='phonemeClick("p")' mat-raised-button *ngIf="ipaView || language2.short==='en' || language2.short==='es' || language2.short==='zh' || language2.short==='fi' || language2.short==='ipa'" [matTooltipPosition]="tooltipPosition" [matTooltip]="tooltipMessage" [matTooltipDisabled]="tooltipDisabled"> p {{exampleWords.p}} <span (click)='playAudio("p")'><mat-icon appHeadphonesIcon aria-hidden="false" aria-label="Headphones icon">headphones</mat-icon></span> </button> 我可以复制并粘贴那个丑陋的 HTML 块 87 次，每次键入另一个字母五次以替换出现的五次p。我可以做一个看起来像的结构指令吗 <button myDirective('p')></button> 我看到了如何制作一个结构指令，该指令根据组件中值的变化来更改 DOM 中的元素，包括当用户单击按钮或提交表单时来自 HTML 视图的值。我不知道如何使用 HTML 模板中设置的值来执行此操作。 我无法使用 p 将 ngClick 传递给指令，因为这需要等待用户单击按钮。该指令需要在用户单击按钮之前设置按钮的样式。 我不能使用ngModel因为按钮不是表单。 如何将 p 从 HTML 视图传递到指令？ 五个p： 设置按钮的样式（颜色、背景、边框半径等） 单击时，按钮会触发 phonemeClick() 处理程序函数并将 p 作为参数传递 向用户显示p 显示组件exampleWords.p 当用户单击headphones图标（在按钮中）时，playMe()处理函数播放音频文件（通过p作为参数
我在父组件中有一个组件和一个指令。父组件模板如下所示： 我在父组件中有一个组件和一个指令。父组件模板如下所示： <div> <child-component></child-component> <dx-data-grid my-directive></dx-data-grid> </div> 有没有办法从“子组件”中获取对“我的指令”的引用？ 我尝试在“子组件”类中使用@ViewChild，例如： @ViewChild(MyDirective) directiveReference: MyDirective; 这是未定义的。 要获取对同级组件上指令的引用，您可以使用模板变量以及 Directive exportAs 选项，它（来自文档）“定义了可以在模板中使用的名称，以将此指令分配给一个变量。” 首先，在 MyDirective 类中，添加一个 exportAs 选项（如果尚未定义）： @Directive({ selector: '[my-directive]', exportAs: 'myDirective', // <--- add this (use whatever name you want) }) export class MyDirective { } 然后，在child-component 类中，定义一个将接受指令引用的输入： @Component({ selector: 'child-component', }) export class ChildComponent { @Input() directiveOnSibling: MyDirective; // <--- add this } 最后，在模板中，通过将指令分配给模板变量（targetDirective，在我的示例中）并将其全部连接起来，并使用您定义的输入将该变量传递给child-component： <div> <child-component [directiveOnSibling]="targetDirective" <-- pass template var to component Input ></child-component> <dx-data-grid my-directive #targetDirective="myDirective" <-- assign directive to template var using its exportAs name ></dx-data-grid> </div> 这是展示这种方法的 StackBlitz。
我创建了一个 lazyLoad 指令来处理延迟加载组件。 @指示（{ 选择器：'[lazyComponent]'， }) 导出类 LazyCompDirective> 实现...
Angular 8 - 没有 ng-component 标签的动态组件创建
我正在为我的应用程序构建一个动态创建组件的指令，并在它装饰的元素之后立即注入它。 该指令工作正常，但有一个问题：当组件为
我研究了angular.io上的代码，并在我的方案中用mat-tab-group进行了复制。然而，我希望能够在*ngFor中使用ad-host指令。我试了一下，结果...