Question

我创建了一个基类来创建自己的结构指令，供我的项目使用，而不是使用带条件的* ngIf。目的是创建一个可以接受多个条件并在我的应用程序的各个部分中重复使用的状态机。这样，我可以更改状态，然后根据当前状态设置结构化的指令show接口。

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仅被调用一次。

问题是，从我的结构性指令中观察服务状态变化的最佳方法是什么？

如何使Angular结构指令动态化？

0 个答案: