Как получить динамическую структурную директиву Angular? - PullRequest
Новая
       9

Как получить динамическую структурную директиву Angular?

0 голосов
/ 05 февраля 2019

Я создал базовый класс для создания собственных структурных директив, которые мой проект будет использовать вместо * ngIf с условиями.Цель состоит в том, чтобы создать конечный автомат, который может принимать несколько условий и использоваться повторно в различных частях моего приложения.Таким образом, я могу изменить свое состояние, а затем получить структурную директиву show interface, основанную на текущем состоянии. 

import { Directive, ElementRef, Inject, Input, OnInit, TemplateRef, ViewContainerRef } from '@angular/core';
import { HttpClient } from "@angular/common/http";
import { AbstractControl, NG_VALIDATORS, Validator, ValidatorFn } from "@angular/forms"

export abstract class ContractBase implements OnInit {
    contracts: Array<any> = [];
    constructor(
        protected templateRef: TemplateRef<any>,
        protected viewContainer: ViewContainerRef,
        protected http: HttpClient) {
    }
    protected updateView() {
        if (this.checkContracts()) {
            this.viewContainer.createEmbeddedView(this.templateRef);
        } else {
            this.viewContainer.clear();
        }
    }
    protected add(contract) {
        this.contracts.push(contract);
    }
    abstract ngOnInit();

    protected checkContracts(): boolean {
        if (!this.contracts)
            throw Error("Contract not found, please set a rule contract visibility.");
        for (var contract of this.contracts) {
            if (!contract())
                return false;
        }            
        return true;
    }
}

Вот реализация, использующая базовый класс.Все работает нормально, как и ожидалось.Когда представление загружено, состояние проверяется, и пользовательский интерфейс отображается на основе начального состояния, сохраненного в службе состояний.

import { ContractBase } from "./permission-base"
import { StateService } from "../services/state-service";


@Directive({
    selector: '[course-manager]'
})
export class ViewCourseManager extends ContractBase implements OnInit
{
    constructor(protected templateRef: TemplateRef<any>,
        protected viewContainer: ViewContainerRef,
        protected http: HttpClient, protected stateService: StateService) {
        super(templateRef, viewContainer, http);

        this.add(() => {
            return !this.stateService.edit;
        });
    }
    ngOnInit() {
        this.updateView();
    }
}

Проблема, с которой я сталкиваюсь, заключается в том, что структурная директива не обновляется при обновлении оператора * ngIf.Другими словами, если я изменяю состояние, директива не обновляет представление.Я предполагаю, что это ожидаемо, поскольку ngOnUpdate вызывается только один раз.

Итак, вопрос в том, как лучше всего следить за изменением состояния в службе из моих структурных директив, чтобы можно было сделать соответствующее обновление?

...