如何从自定义结构指令Angular Nativescript中获取单个项目

问题描述

我有一条指令（ExpDirective），我从另一个组件（ExpAComponent）内部获得了一组项目，但没有从模板中获得。在另一个组件（ExpBComponent）的模板中使用该指令的地方，我试图获取该数组的每次迭代并显示它。但是，我无法在ExpBComponent的模板中获取每次迭代并显示它们。

<GridLayout rows="auto,*" class="container-fluid">
    <ns-action-bar row="0"></ns-action-bar>
    <ios row="1">
        <ExpBComponent>
            <ng-template expDirective let-item="item">
                <Label [text]="item" textWrap="true"></Label>        
            </ng-template>
        </ExpBComponent>
    </ios>
    <StackLayout *ngIf="noResults && !isLoading" class="result-ctn" row="1">
        <Label id="noResult" text="&#xf002;" class="fas" (loaded)="onLoaded($event)"></Label>
        <Label id="noResult" [text]="results" (loaded)="onLoaded($event)"></Label>
        <Button text="Reload" (tap)="onReload()"></Button>
    </StackLayout>
</GridLayout>

@Directive({ selector: "[expDirective]" })
export class ExpDirective implements OnInit {
    private arrayOfItems: Array<any>;

    constructor(private owner: ExpAComponent,private templateRef: TemplateRef<any>,private vcRef: ViewContainerRef) {}

    ngOnInit() {
        this.owner.productsArrayChange.subscribe((array) => {
            this.arrayOfItems = array;
            this.addTemplates();
        });
    }

    addTemplates() {
        for(const prod of this.arrayOfItems) {
            this.vcRef.createEmbeddedView(this.templateRef,prod
            );
        }
    }
}

@Component({
    selector: "MasonryTiling",templateUrl: "./masonry-tiling.component.html",styleUrls: ["./masonry-tiling.component.scss"],})
export class MasonryTilingComponent implements OnInit,OnDestroy {
    private _productsArray: Array<SearchableProduct> = ["awesome","test","server"];
    private arrayChange = new BehaviorSubject<Array<SearchableProduct>>(this.productsArray);

    constructor() {
    }

    ngOnInit() {
    }

    set productsArray(array: Array<SearchableProduct>) {
        this._productsArray.push(...array);
        this.arrayChange.next(this.productsArray);
    }

    get productsArray() {
        return this._productsArray;
    }

    get productsArrayChange() {
        return this.arrayChange;
    }

    ngOnDestroy() {
    }
}

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

angular nativescript-angular