角度如何从通过绑定的同级组件调用方法<router-outlet>？

Question

我有一个项目，使用HTTP调用从API端点获取数据，然后显示在屏幕上。这是一个简单的待办事项列表。因此，您可以向列表添加项目，查看列表中的所有项目，删除项目等。

项目结构如下:

• Items-Component(基本上包含整个App)

  • Item-list-component
  • Item-detail-component
  • Item-edit-component
  • item-add-component

• Item.service

Items.component.html如下所示:

<div class="row">
<div class="col-md-5">
<app-item-list></app-item-list>
</div>
<div class="col-md-7">
<router-outlet></router-outlet>
</div>

因此我们可以看到item-list-component和其他3个组分(通过router-outlet结合)是兄弟组分我就是这么想的。

So myProblem现在是:我希望每当创建一个新的Item时，items[]中的items。列表组件应该自动刷新。现在我必须点击"Fetch item "按钮刷新项目[].

当我添加一个新的Item时，它从我的Item中触发一个方法。服务，它持有一个fetchItems方法，该方法只返回API端点的Observable，如下所示:

Item-add component.ts:

@Component({
selector: 'app-item-add',
templateUrl: './item-add.component.html',
styleUrls: ['./item-add.component.css']
})
export class ItemAddComponent implements OnInit {
constructor(private itemService: ItemService, private route: ActivatedRoute, private router: Router) { }
ngOnInit(): void {
}
onCreatePost(item: Item) {
// Send Http request
this.itemService.createAndStorePost(item.description, item.isComplete);
//Here I want that the items[] in the items.list component refreshes when I add new Item
this.onCancel();
}
onCancel() {
this.router.navigate([''], {relativeTo: this.route});
}
}

和item.service.ts:

@Injectable()
export class ItemService {
constructor(private http: HttpClient, private route: ActivatedRoute, private router: Router) {
}
fetchItems(): Observable<Item[]> {
return this.http.get<Item[]>('https://localhost:44321/api/TodoItems');
}
fetchItem(id: number): Observable<Item> {
return this.http.get<Item>('https://localhost:44321/api/TodoItems' + '/' + id);
}
createAndStorePost(description: string, isComplete: boolean) {
var item = { description: description, isComplete: isComplete };
this.http.post('https://localhost:44321/api/TodoItems', item)
.subscribe(Response => {
});
}
deleteItem(id: number): Observable<Item> {
return this.http.delete<Item>('https://localhost:44321/api/TodoItems' + '/' + id);
}
updateItem(id:number, item: Item) {
this.http.put<Item>('https://localhost:44321/api/TodoItems' + '/' + id, item).subscribe();
}
}

然后items-list组件捕获这个可观察对象并订阅它，并在组件本身中设置订阅和items[]的响应:

@Component({
selector: 'app-item-list',
templateUrl: './item-list.component.html',
styleUrls: ['./item-list.component.css']
})
export class ItemListComponent implements OnInit {
items: Item[] = [];
constructor(private route: ActivatedRoute, private router: Router, private itemService: ItemService) { }
ngOnInit(): void {
this.onFetchItems();
}
onFetchItems() {
this.itemService.fetchItems().subscribe(Response => {
this.items = Response;
});
}
onNewItem() {
this.router.navigate(['new'], {relativeTo: this.route});
}
}

我该怎么做才能触发条目。list应该取回物品吗?我不能使用@ViewChild，因为它不是父子关系。

我可以实现item的实例吗?列表在项目的任何地方，只是调用onFetchItems方法?

谢谢!

Answer 1

您可以使用BehaviorSubject在不同组件之间共享数据。下面是一个例子:

在你的ItemService.

import { BehaviorSubject } from 'rxjs';
@Injectable()
export class ItemService {
private _itemsSource = new BehaviorSubject([]);
currentItems  = this._itemsSource.asObservable();

constructor() { }
updateItems(items: []): void {
this._itemsSource.next(items)
}

}

在你的ItemsComponent中，你在获得所有的项目后更新服务中的新值，

@Component({
selector: 'app-item',
templateUrl: './item.component.html',
styleUrls: ['./item.component.css']
})
export class ItemComponent implements OnInit {
items: Item[] = [];
constructor(private itemService: ItemService) { }
ngOnInit(): void {
this.onFetchItems();
}
onFetchItems() {
this.itemService.fetchItems().subscribe(Response => {
this.items = Response;
this.updateItems(this.items)
});
}
updateItems(newItems: []): void {
this.itemService.updateItems(newItems)
}
}

在你的ItemListComponent

@Component({
selector: 'app-item-list',
templateUrl: './item-list.component.html',
styleUrls: ['./item-list.component.css']
})
export class ItemListComponent implements OnInit {
items: Item[] = [];
subscription: Subscription;
constructor(private route: ActivatedRoute,
private router: Router,
private itemService: ItemService) { }
ngOnInit(): void {
this.subscription = this.itemService.currentItems.subscribe(items => this.items = items)
}
onNewItem() {
this.router.navigate(['new'], {relativeTo: this.route});
}
ngOnDestroy() {
this.subscription.unsubscribe();
}
}