Question

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

sidebar.component
data.service
body.component。

在侧边栏组件中，我有一个按钮，然后单击，然后单击一个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;
      }
    )
  }
}

data.service.ts

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

  constructor(private httpClient: HttpClient) { }

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

sidebar.html

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

在sidebar.html中显示事物值的效果很好，但我希望在正文中使用此值以将其显示在其中

body.html

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

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

Answer 1

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中创建一个静态变量。

将值传递给相同级别的组件

1 个答案: