时间戳

首页 > 解决方案 > 将值传递给同级组件

angularjs - 将值传递给同级组件

问题描述

我想将事物数组的值传递给同一级别的组件。我的应用程序的结构是：

在侧边栏组件中，我得到了按钮，单击时我正在访问 API。

sidebar.component.ts

export class SidebarComponent implements OnInit {
  things : Thing [] = [];

  ngOnInit(): void {
  }

  onClick(user): void {
    this.dataService.getThings(user.item.id).subscribe(
      data => {
        this.things = data.items;
      }
    )
  }
}

数据服务.ts

@Injectable({
  providedIn: 'root'
})
export class DataService {

  constructor(private httpClient: HttpClient) { }

  public getThings(id): Observable<ThingsResources> {
    return this.httpClient.get<ThingsResources>(this.thingsUrl + id);
  }
}

边栏.html

<div>
    <ng-container *ngFor= "let things of things">
        <div>
            <span>{{things.name}}</span>
        </div>
    </ng-container>
</div>

并且在 sidebar.html 中显示事物值效果很好，但我想在正文中显示这些值以显示它

正文.html

<div>
    <ng-container *ngFor= "let things of things">
        <div>
            <span>{{things.name}}</span>
        </div>
    </ng-container>
</div>

侧边栏和正文组件不是子组件和父组件。我猜@Input 和@Output 将不起作用。有什么想法如何传递这些值？

标签： angularjsangulartypescript

解决方案

1-我在这里看到冲突，你声明了与你的容器同名的 var。

<ng-container *ngFor= "let things of things">

2-为什么ng-container！你可以在 div 中循环

<div>
    <div *ngFor= "let thing of things">
        <span>{{ thing.name }}</span>
    </div>
</div>

3-您可以通过GetThings在您的函数中创建一个函数来传递值，DataService然后像这样调用该函数（在将其注入之后Body）

<div *ngFor= "let thing of dataServ.GetThings()">

或者你可以在sidebar.

推荐阅读