angular-components 相关问题

通过 Angular 2 中的 @Input() 装饰器使用多个属性

我有一个通过其选择器接收两个输入的组件，但这可以扩展到任意数量的输入和任何组件。因此，为了消耗组件中的多个属性，我...

从动态创建的组件访问子组件 - Angular 12

在全局组件内部我有动态创建组件的方法 const comFactory = this.resolver.resolveComponentFactory(ParentComponent); const 组件：any = this.componentContainer.

Angular 18 组件无法按预期与 blob 一起工作

我有一个 Angular 18 项目，它从 API 中提取图像数据并将其显示在屏幕上。有人可以帮助我理解这种行为吗？ 应用程序抛出异常“文档未定义”...

如何更改子组件的父变量？

这个问题很简单，但我无法摆脱它。 我在父模板中有一个 ，当通过路由模块显示子模板时，我需要它消失。我所期待的是 这个问题很简单，但我就是摆脱不了。 我在父模板中有一个<header>，当通过路由模块显示子模板时我需要它消失。我期望的是在 header 标签中添加一个类，这样我就可以通过 CSS 隐藏它。这就是我拥有的： app.component.ts import { Component } from '@angular/core'; @Component({ selector: 'app', template: ` <header [class.hidden]="hide"> <h1>My App</h1> <ul> <li><a href="/home"></a></li> <li><a href="/showoff"></a></li> </ul> </header> <router-outlet></router-outlet> ` }) export class AppComponent { hide = false; // <-- This is what I need to change in child component } app-routing.module.ts import { RouterModule, Routes } from '@angular/router'; import { HomeComponent } from './welcome.component'; import { ShowOffComponent } from './show.off.component'; const routes: Routes = [ { path: '', component: HomeComponent }, { path: 'showoff', component: ShowOffComponent }, ]; export const AppRouting = RouterModule.forRoot(routes, { useHash: true }); show.offf.component.ts import { Component } from '@angular/core'; @Component({ selector: 'app-showoff', template: ` <h2>Show Off</h2> <div>Some contents...</div> ` }) export class ShowOffComponent { hide = true; // <-- Here is the problem. // I don't have any idea how to reach parent variables. } 您可以使用输出发射器 在您的子组件中， import { Component } from '@angular/core'; @Component({ selector: 'app-showoff', template: ` <h2>Show Off</h2> <div>Some contents...</div> ` }) export class ShowOffComponent { @Output() onHide = new EventEmitter<boolean>(); setHide(){ this.onHide.emit(true); } } 在家长中， export class AppComponent { hide = false; changeHide(val: boolean) { this.hide = val; } } 使用该事件发射器向父级添加子级， <app-showoff (onHide)="changeHide($event)"></app-showoff> 我最近在 Angular 6 中遇到了同样的现象。 我想访问和更改属于父组件或祖父组件的变量。请参见下图。我想访问和更改属于 Tom 的变量，来自 Jim（Tom 的孩子）和 Sara（Tom 的孙子）。 可能还有其他一些解决方案，但我用来克服这个问题的方法是使用ViewContainerRef。我必须将 ViewContainerRef 注入到子组件的构造函数中，我需要访问父组件并遍历父节点（或多个节点）以查找父变量。 注入构造函数， constructor(private viewContainerRef: ViewContainerRef) { } 访问并遍历到父节点， getParentComponent() { return this.viewContainerRef[ '_data' ].componentView.component.viewContainerRef[ '_view' ].component } 我用上图中给你的场景制作了一个 StackBlitz 示例。 https://stackblitz.com/edit/angular-comms 在您的 app.component.ts 中，您可以检查您的 URL 并设置 hide 变量值，如下所示： import { Component } from '@angular/core'; import { Router, NavigationStart } from '@angular/router'; @Component({ selector: 'app', template: ` <header [class.hidden]="hide"> <h1>My App</h1> <ul> <li><a href="/home"></a></li> <li><a href="/showoff"></a></li> </ul> </header> <router-outlet></router-outlet> ` }) export class AppComponent { hide = false; // <-- This is what I need to change in child component constructor(private router: Router){} public ngOnInit() { this.router.events.subscribe((events) => { if (events instanceof NavigationStart) { if (events.url === '/' || events.url === '/home') { this.hide = false; } else { this.hide = true; } } }); } } 不太直接，但（恕我直言）更准确地实现这一目标的方法是使用服务。 创建parent-to-child.service.ts 文件并创建主题属性 导出类 ParentToChildService { 显示标题=新主题（）； } 通过父组件和子组件中的构造函数将其注入： 构造函数（私有 ptcService：ParentToChildService ）{} 使用 ngIf（或者你可以使用 ngClass，如果你坚持使用 CSS 方法）将标头组件绑定到其 TS 文件中的属性： html: <header *ngIf="showStatus"> TS：showStatus: boolean = true; // true by default ptcSubscription: Subscription; 在标头组件的 ngInit 上订阅该主题： ngOnInit(): { this.ptcSubscription = this.ptcService.showHeader.subscribe( （新状态：布尔值）=> { this.showStatus = newStatus }); } ）； } 在您的子组件中，每当您需要隐藏 <header> 时，请在服务主题上调用 next： this.ptcService.showHeader.next(false); //隐藏标题

Angular 2 Extended Family 组件通信（无需父级或外部服务）

我需要一个非常易于理解的解决方案来实现大家庭（即叔叔到侄子、侄女到阿姨、自己到表弟）组件/指令之间的通信，而无需共同的父母/祖先...

如何设置 Angular 父组件和子组件的样式

我正在学习 Angular 18，同时我已经了解了 React。我有一个“相当大”的 HTML 文件，我想将其拆分。让我们来看这个伪简化示例： 你好... 我正在学习 Angular 18，同时我已经了解 React。我有一个“相当大”的 HTML 文件，我想将其拆分。让我们看这个伪和缩小的例子： <ul> <li>Hello</li> <li>World</li> <li>This is Angular</li> </ul> # simple applied CSS ul { display: flex; } 现在假设我想创建一个名为 <list> 的新组件，其中包含所有三个 <li> 元素，例如： # list.component.html <li>Hello</li> <li>World</li> <li>This is Angular</li> # parent-of-list.component.html <ul> <list /> </ul> # which will render the actual DOM as... <ul> <list-comp> <li>Hello</li> <li>World</li> <li>This is Angular</li> </list-comp> </ul> 我之前写的flexbox样式被破坏了，因为<list>选择器被渲染，因此flex-box应用于<list>元素而不是<li>。在 React 中，我使用了该片段，在 Angular 中，我刚刚读到了有关 <ng-container> 的内容，但经过几次尝试后，它似乎无法正常工作。 我知道这似乎是一个无意义的例子，但只是把它当作一个缩小的例子。在这个项目中，我必须提取例如表格的一行，以两种不同的方式渲染它，因此我想为每个组件使用两个不同的组件，但是这样，样式就被破坏了。 任何人都可以澄清如何“思考”它吗？我希望有一个解决方案，但最重要的是理解这个概念的解释。我已经阅读了样式指南和文档，我也用谷歌搜索，但我不满意。 您可以通过将样式 display: contents 应用于子组件的宿主来修复布局： /* list-comp.component.css */ :host { display: contents; } 您可以简单地使用不同的角度分量选择器。 [selector] -> 属性选择器。 (<li selector></li>) .selector -> 类选择器。 (<li class="selector"></li>) selector -> 组件选择器。 (<selector></selector>) 属性和组件选择器的优点是没有插入角度标签。 完整代码： import { Component, Input } from '@angular/core'; import { bootstrapApplication } from '@angular/platform-browser'; @Component({ selector: '.li-comp', standalone: true, template: ` <ng-content/> `, }) export class LiComp { @Input() text!: string; } @Component({ selector: 'app-root', standalone: true, imports: [LiComp], template: ` <ul> <li class="li-comp">Hello</li> <li class="li-comp">World</li> <li class="li-comp">This is Angular</li> </ul> `, }) export class App { name = 'Angular'; } bootstrapApplication(App); Stackblitz 演示 我认为你只需要在 <ng-container> 组件中使用 <list> 来包装所有 3 个 <li> 标签，如下所示： <ng-container> <li>Hello</li> <li>World</li> <li>This is Angular</li> </ng-container> 在您的 parent-of-list.component.html 中，您可以包含 <list>，如下所示： <ul> <list /> </ul> 在实际的 DOM 中它会像下面这样渲染： <ul> <li>Hello</li> <li>World</li> <li>This is Angular</li> </ul> ng-container 允许您在 Angular 中维护 HTML 结构，但在浏览器上检查您的网站时，它不会在实际 DOM 中呈现。我认为它类似于React片段。 这样，您的 <li> 标签将呈现为 <ul> 的直接子级，并且您的 display: flex; 也将在所有 <li> 元素上发挥作用。

缺少参数：在 Angular4 中发布数据时出现电子邮件、密码错误？

我是 Angular 4 的新手。我正在开发登录页面，其中我必须在登录时发布用户信息。但是我收到错误如下 “code”：“rest_missing_callback_param”，“message”：“缺少参数（...

如何在 Flex 布局中设置 Angular 组件的样式

我正在学习 Angular 18，同时我已经了解了 React。我有一个“相当大”的 HTML 文件，我想将其拆分。让我们来看这个伪简化示例： # HTML 我正在学习 Angular 18，同时我已经了解 React。我有一个“相当大”的 HTML 文件，我想将其拆分。让我们看这个伪和缩小的例子： # HTML <ul> <li>Hello</li> <li>World</li> <li>This is Angular</li> </ul> # simple CSS ul { display: flex; } 现在假设我想创建一个名为 <list-comp> 的新组件，其中包含所有三个 <li> 元素，例如： <ul> <list-comp /> </ul> 我编写的 Flexbox 样式已损坏，因为渲染了 <list-comp> 选择器，因此 Flex-Box 应用于 <list-comp> 元素而不是<li>。在 React 中，我使用了该片段，在 Angular 中，我刚刚读到了有关 <ng-container> 的内容，但经过几次尝试后，它似乎无法正常工作。 我知道这似乎是一个无意义的例子，但只是把它当作一个缩小的例子。在这个项目中，我必须提取例如表格的一行，以两种不同的方式渲染它，因此我想为每个组件使用两个不同的组件，但是这样，样式就被破坏了。 任何人都可以澄清如何“思考”它吗？我希望有一个解决方案，但最重要的是理解这个概念的解释。我已经阅读了样式指南和文档，我也用谷歌搜索，但我不满意。 您可以简单地使用不同的角度分量选择器。 [selector] -> 属性选择器。 (<li selector></li>) .selector -> 类选择器。 (<li class="selector"></li>) selector -> 组件选择器。 (<selector></selector>) 属性和组件选择器的优点是没有插入角度标签。 完整代码： import { Component, Input } from '@angular/core'; import { bootstrapApplication } from '@angular/platform-browser'; @Component({ selector: '.li-comp', standalone: true, template: ` <ng-content/> `, }) export class LiComp { @Input() text!: string; } @Component({ selector: 'app-root', standalone: true, imports: [LiComp], template: ` <ul> <li class="li-comp">Hello</li> <li class="li-comp">World</li> <li class="li-comp">This is Angular</li> </ul> `, }) export class App { name = 'Angular'; } bootstrapApplication(App); Stackblitz 演示 您可以通过将样式 display: contents 应用于子组件的宿主来修复布局： /* list-comp.component.css */ :host { display: contents; }

为什么要从一个模块导出组件并在另一个模块组件中使用

我已经为此努力了很长时间。然而，我最终放弃并寻求社区的支持。预先感谢您的帮助！ 我有网络项目模块，它使用我们...

如何将默认属性应用于角度组件

我正在尝试将一些字段格式化为整齐的行和列，并且因为我必须将一些其他组件与非常特定的格式相匹配，所以工作的 html 如下所示： 我正在尝试将一些字段格式化为整齐的行和列，并且因为我必须将一些其他组件与非常特定的格式相匹配，所以工作的 html 看起来像这样： <div fxLayout="column" style="margin-right: -30px"> <div fxLayout="row" fxLayoutGap="10px" style="margin-bottom: 3px"> <div fxFlex="92" fxLayout="row column" fxLayoutAlign="space-between start"> <some-component-1 fxFlex="45" fxFlex.sm="90" fxFlex.xs ="90" ></some-component-1> <some-component-2 fxFlex="45" fxFlex.sm="90" fxFlex.xs ="90" ></some-component-2> </div> </div> </div> 要输入或复制粘贴的内容很多，因此我想将其中一些 fxLayout div 抽象为角度组件，使其看起来像这样： <my-row> <my-column> <some-component-1></some-component-1> </my-column> <my-column> <some-component-2></some-component-2> </my-column> </my-row> 我能够像这样创建 my-row 组件： row.component.html： <div fxLayout="column" style="margin-right: -30px"> <div fxLayout="row" fxLayoutGap="10px" style="margin-bottom: 3px"> <div fxFlex="92" fxLayout="row column" fxLayoutAlign="space-between start"> <ng-content></ng-content> </div> </div> </div> 这让我可以这样做： <my-row> <some-component-1 fxFlex="45" fxFlex.sm="90" fxFlex.xs ="90" ></some-component-1> <some-component-2 fxFlex="45" fxFlex.sm="90" fxFlex.xs ="90" ></some-component-2> </my-row> 不过，我不想为每个嵌套组件包含这些 fxFlex 属性。当我尝试创建 my-column 组件时，默认情况下无法将 fxFlex 字段应用到该组件。 我尝试了以下方法，但没有成功： column.component.html： <ng-container fxFlex="45" fxFlex.sm="90" fxFlex.xs ="90" > <ng-content></ng-content> </ng-container> 和 <ng-container> <ng-content fxFlex="45" fxFlex.sm="90" fxFlex.xs ="90" ></ng-content> </ng-container> 有没有办法自动将这些 fxFlex 属性应用到 my-column 组件？ 您可以尝试使用角度指令并向新组件添加指令my-row，它将看到这个新组件并获取其所有子组件并分配您想要的属性： import {Directive, ElementRef} from '@angular/core'; @Directive({ standalone: true, selector: '[myRowDirective]', }) export class MyRowtDirective { constructor(private el: ElementRef) { const row = this.el.nativeElement; const components = select all children of row for component in components{ component.setAttribute("fxFlex", "45") ... } } } 我制作了一个简化的代码，研究了一些关于指令的信息，但这是一个可以提供帮助的基础。

在指令组合 API 中使用指令输出

Angular 文档表明，即使指令有输出，您也可以使用指令组合 API。然而，指令的输出似乎变成了组件的输出。我想使用指令的...

Angular 事件监听器更新类属性，但不更新模板

Angular 新手（使用 18.2）并尝试从 svg 上的鼠标事件获取回调。代码是这样的： 组件.html …… Angular 新手（使用 18.2）并尝试从 svg 上的鼠标事件获取回调。代码是这样的： 组件.html … <object data="image.svg" type="image/svg+xml" #mySvg></object> … <div> @if (activeElement) { ... display info re svg path ... } </div> 组件.ts export class MyComponent implements AfterViewInit { protected activeElement: type = undefined @ViewChild('mySvg') mySvg!: ElementRef; ngAfterViewInit(): void { this.mySvg.nativeElement.addEventListener('load', () => { this.mySvg.nativeElement.contentDocument.querySelector('svg').addEventListener('mouseover', this.onMouseover.bind(this)) }) } protected onMouseover(event: MouseEvent): void { if (conditions) { this.activeElement = this.service.getDataForElement(event.target) } else { this.activeElement = undefined } } 回调似乎按预期工作。鼠标悬停时，会调用 onMouseover 方法并更新类变量（在过程中的各个点通过 console.log(JSON.stringify(this)) 确认），但模板不会响应变量更改。我尝试了 ngAfterViewInit 的几个不同版本，例如将所有逻辑直接放在那里（而不是绑定）并按照建议的几个地方使用超时，但行为没有改变。 我能够让它工作的唯一方法是将模板更改为 … <svg xmlns="http://www.w3.org/2000/svg" (mouseover)="onMouseover($event)"> <path...> … </svg> 所以我认为控制器 -> 模板交互应该正常工作。 关于如何调试这个或要研究什么有什么建议吗？预先感谢。 “变更检测器”机制可能是这里的问题。因此，您的类变量 activeElement 必须添加到 Angular 更改检测器机制中，以便跟踪更改并对模板文件产生影响。为您的类变量activeElement添加setter和getter。这将跟踪更改，因为 setters 和 getters 是更改检测器的一部分。 .ts 文件： get activeElementValue() { return this.activeElement } set activeElementValue(activeElement) { this.activeElement = activeElement } … if (conditions) { this.activeElementValue = this.service.getDataForElement(event.target); } else { this.activeElementValue = undefined; } .html 文件： … <div> @if (activeElementValue) { ... display info re svg path ... } </div> … 处理变更检测器的其他机会是 setTimeout() 或 detectChanges()。但使用这些解决方案会干扰 Angular 生命周期。这就是为什么我建议使用 getter 和 setter 来解决问题。 设置超时： if (conditions) { setTimeout(() => this.activeElement = this.service.getDataForElement(event.target)); } else { setTineout(() => this.activeElement = undefined); } 检测变化： if (conditions) { this.activeElement = this.service.getDataForElement(event.target); this.changeDetectorRef.detectChanges(); } else { this.activeElement = undefined; this.changeDetectorRef.detectChanges(); }

在自定义 Angular 组件中实现表单控件验证

我正在为我的 Angular 项目实现我自己的组件。我正在努力明智地实施验证消息。 我当前的实现有多个布尔输入“required&qu...

如何使用服务的输入/输出动态创建组件实例并将其单独注入到 DOM 中？

在 Angular 2 中创建动态组件时，我发现这个过程需要 ViewContainerRef 才能将新创建的组件添加到 DOM。 并且将 @Input 和 @Output 传递给那些动态......

如何在 Angular 中覆盖第三方库中的组件？

我正在使用一个内部库，它提供了一个通用的身份验证解决方案，包括带有登录表单的登录页面。对于特定应用程序，我需要通过添加

声明具有泛型类型的组件

是否可以在 Angular 4 中声明具有泛型类型的组件？ 以下代码会导致构建错误： 导出类 MyGenericComponent 实现 OnInit { @Input() 数据：

如何使用 ngx-mat-select-search 的多个实例而不检查输入数组长度？

我制作了一个可重用的 ngx-mat-select-search 组件，如下所示 mat-tooltip-select-all.component.ts 导出类 MatTooltipSelectAllComponent 实现 OnInit、AfterViewInit、OnDestroy { @

Angular 18 组件未被识别/显示

我开始制作 Angular 18 应用程序，并添加了我的第一个组件（使用独立组件），但该应用程序似乎无法识别我的组件，因为当我将它作为 HTM 添加到我的 app.component.ts 中时...

是否可以使用选择器动态渲染 Angular 组件？

`是否可以动态渲染 Angular 组件？例如，我的 .ts 文件中有组件选择器名称。当我使用插值和innerHTML绑定.html文件中的变量时...

角度材质选项卡不适用于包装组件

我们正在开发一个企业组件库，该库应提供 Material Design Angular 组件。所以这个库的用户不应该使用例如Angular Material 直接但ra...