如何在不同组件的异步环境中获取项目？

Question

我有这个代码的主要组件（没有导入）：

class AppComponent {
    products = null;
    productsUpdated = new EventEmitter();

    constructor(product_service: ProductService) {
        this._product_service = product_service;

        this._product_service.getList()
            .then((products) => {
                this.products = products;
                this.productsUpdated.emit(products)
            });
    }
}

使用模板： <left-sidenav [productsReceived]="productsUpdated"></left-sidenav>

以及用于排序产品的组件：

class LeftSidenavComponent {
    @Input() productsReceived;
    @Output() productsSorted = new EventEmitter();

    categories = []

    constructor(product_list_service: ProductListService) {
        this._product_list_service = product_list_service;
    }            
    ngOnInit() {
        this.productsReceived.subscribe((products) => {
            this.categories = products.map((elem) => {
                return elem.category
            })
        });
    }
}

因此，当所有绘制完成后，LeftSidenavComponent 中的 categories 数组为空。我认为 productUpdated 事件发射器在 LeftSidenavComponent 订阅它之前触发，但不知道如何处理。

Answer 1

我建议将 EventEmitter 移动到您注入的服务中，例如

@Injectable()
    export class DrinksService {
    drinkSelected = new EventEmitter<any>();
    drinkChanged = new EventEmitter<any>();
    drinksToggle = new EventEmitter<any>();
}

以上代码是我的一个项目的示例，只是更改了变量名。

这种方式无需依赖 HTML 模板来修改 productsReceived，您只需订阅 ngOnInit 中的 eventEmitter。

目前，您的代码正在使用数据绑定到事件发射器 productsUpdated，但您可以简单地进行数据绑定 [productsReceived]="productsUpdated"，其中 productsUpdated 是一个空列表。一旦 productsUpdated 填充了值，它将反映在 DOM 中。您必须通过订阅像...

这样的事件发射器来填充 productsUpdated

this.myEmitter
    .subscribe(
        (data)=>this.productsUpdated = data
    );

这有帮助吗？主要是将数据绑定到列表，而不是事件发射器。

如何在不同组件的异步环境中获取项目？

How to get items in asynchronous environment in different components?

javascript

asynchronous

promise

eventemitter

angular