组件控制称为视图的屏幕补丁。组件装饰器允许您将类标记为Angular组件，并提供其他元数据，以确定如何在运行时处理，实例化和使用组件。
Masonry 无法与 Bootstrap 5 和 Angular 13 一起使用
我在我的网站（https://mypleaks.com）上沿着 Bootstrap 5 和 Angular 13 新实现了 Masonry。 我从 https://getbootstrap.com/docs/5.1/examples/masonry/ 引用了示例并添加了 <
Angular 2：当我第一次加载页面时，属性的组件值不会显示在 html (DOM) 中
我在 Angular 2 中有一个组件，如下所示： @成分（{ 选择器：'gal-tour-summary'， template: '显示变量: {{this.testVariable}}', styleUrls: ['./tour-summary.component.css']...
Angular 计算信号的更新仅发生一次，但不适用于未来的依赖项更新
我正在尝试根据信号的值过滤数组，我认为计算信号是实现此目的的最佳选择。我的目标是仅显示匹配的结果（通过自定义过滤功能...
我正在尝试在循环内调用函数。 如何调用函数并将返回值存储为临时变量？ 我需要使用返回值来显示。 我想要实现以下代码示例...
你知道如何加载页面，然后加载其中的某个组件吗？ 例如，我有一个带有导航栏和 API 调用组件（显示表格）的页面。 我想要加载页面，我们...
如何在 AngularJS 中自动向下滚动到 div 的底部
我在 AngularJS 中有一个聊天应用程序，我只是想像大多数聊天应用程序一样向下滚动到底部。我尝试了原生 element.scrolltop 属性但没有成功 代码 搜索.comp...
我了解信号的基础及其用途，并且自己采用了它们。只是想完全了解何时使用它们。 我对何时使用信号感到困惑，我已经看到了......
如何使用后端请求更新 Angular 中的组件，而不刷新页面？
我想更新我的心形图标，该图标绑定到每个产品，以添加到收藏夹。 我想更新我的心形图标，该图标绑定到每个产品，以添加到收藏夹。 <i class="fa-regular fa-heart" *ngIf="!isFavourite"></i> <i class="fa-solid fa-heart" *ngIf="isFavourite"></i> 为此，我使用服务中的后端请求从数据库中获取数据，与切换相同，后端逻辑有效，唯一的问题是我每次都必须刷新页面才能看到心形图标切换。 import { Injectable } from '@angular/core'; import { HttpClient } from '@angular/common/http'; import { environment } from '../../../../environments/environment'; import { Observable, BehaviorSubject } from 'rxjs'; import { PrimitiveProduct } from '../models/product.model'; @Injectable({ providedIn: 'root' }) export class FavouriteService { apiUrl = `${environment.apiUrl}/user/favourites`; private favouritesSubject = new BehaviorSubject<PrimitiveProduct[]>([]); favourites$ = this.favouritesSubject.asObservable(); constructor(private http: HttpClient) {} fetchFavourites(): void { this.http .get<PrimitiveProduct[]>(this.apiUrl, { withCredentials: true }) .subscribe({ next: (favourites) => { this.favouritesSubject.next(favourites); }, error: (err) => console.error('Error fetching favourites:', err) }); } toggleFavourite(productUid: string): Observable<string> { return this.http.post<string>( `${this.apiUrl}?productUid=${productUid}`, null, { withCredentials: true } ); } updateFavouritesLocally(productUid: string) { const favourites = this.favouritesSubject.getValue(); const isAlreadyFavorite = favourites.some((fav) => fav.uid === productUid); if (isAlreadyFavorite) { this.favouritesSubject.next( favourites.filter((fav) => fav.uid !== productUid) ); } else { const newFavourite: PrimitiveProduct = { uid: productUid } as PrimitiveProduct; this.favouritesSubject.next([...favourites, newFavourite]); } } } 这就是我在产品组件中使用toggleFavourite()的方式： ngOnInit() { this.favouriteService.favourites$.subscribe((favourites) => { this.isFavourite = favourites.some((fav) => fav.uid === this.product.uid); }); } toggleFavourite(event: Event) { event.stopPropagation(); this.favouriteService.toggleFavourite(this.product.uid).subscribe({ next: () => { this.favouriteService.updateFavouritesLocally(this.product.uid); }, error: (err) => { console.error('Error toggling favourite:', err); } }); } 在收藏夹组件中，我在用户帐户部分显示数据： export class FavouritesComponent implements OnInit { favouriteProducts: PrimitiveProduct[] = []; constructor(private favouriteService: FavouriteService) {} ngOnInit() { this.favouriteService.fetchFavourites(); this.favouriteService.favourites$.subscribe((products) => { this.favouriteProducts = products; }); } } 我尝试了BehaviorSubject的方法，但我仍然必须刷新页面才能看到结果。总体而言，将产品添加到收藏夹（愿望清单）效果很好，我只是对这种烦人的刷新有问题。我应该使用 localStorage 之类的东西吗？看起来很简单，但还是不知道怎么做。 这里有一些免费的指针： 使用动态类而不是 ngIf <i [class]="'fa-heart ' + isFavourite ? 'fa-regular' : 'fa-solid'"></i> 有几种不同的方法可以做到这一点 始终取消订阅。 这里有关于如何做到这一点的资源。 关于你的问题：你的 toggleFavourite 函数太复杂了。 有2种方法可以解决这个问题。 调用后端并等待结果然后显示结果 假设它有效，更新前端并继续。 你两者都在做。 我假设您正在尝试执行第 2 项操作。在您的 toggleFavourite 函数中，将对 updateFavouritesLocally 的调用移出您的订阅。 无需等待切换响应，因为您没有使用返回的任何内容。 toggleFavourite(event: Event) { event.stopPropagation(); this.favouriteService.updateFavouritesLocally(this.product.uid); // Add `.pipe()` and use it to unsubscribe this.favouriteService.toggleFavourite(this.product.uid).subscribe({ next: () => { /* empty */ }, error: (err) => { console.error('Error toggling favourite:', err); } }); 还有一点，这个选角让我很担心 const newFavourite: PrimitiveProduct = { uid: productUid } as PrimitiveProduct; this.favouritesSubject.next([...favourites, newFavourite]); 在打字稿中你应该像这样进行转换。 它要么是 PrimitiveProduct，因为这是正确的签名，要么不是。 问题可能出在该对象中缺少数据的要求中的某个地方。 我不能肯定地说。
我有一个带有 FormControl 的组件并订阅其值更改： @成分（...） 导出类 FooComponent 实现 OnInit、OnDestroy { fooFormControl: 表单控件； ... ngOnIni...
有人可以解释一下 Angular 5 中延迟加载模块和动态组件加载之间的区别吗？我很难弄清楚何时使用什么。您能为每个...提供一个用例吗？
通过 Angular 2 中的 @Input() 装饰器使用多个属性
我有一个通过其选择器接收两个输入的组件，但这可以扩展到任意数量的输入和任何组件。因此，为了消耗组件中的多个属性，我...
在全局组件内部我有动态创建组件的方法 const comFactory = this.resolver.resolveComponentFactory(ParentComponent); const 组件：any = this.componentContainer.
我有一个 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 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”：“缺少参数（...
我正在学习 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") ... } } } 我制作了一个简化的代码，研究了一些关于指令的信息，但这是一个可以提供帮助的基础。