0

subject.next(false)我想使用一个主题来更新我的 Angular 组件，但是当我调用Storybook时它不起作用。组件实例的属性已更新，但不适用于画布面板。

我有一个像这样的加载组件

@Component({
    selector: 'app-loading',
    templateUrl: './loading.component.html'
})
export class LoadingComponent implements OnInit, OnDestory {
    // control the loading icon show or not
    public state: boolean = true;
    private subscription: Subscription = null;

    constructor(private loadingSerivce: LoadingService) {}

    ngOnInit(): void {
        this.subscription = this.loadingService.state.subscribe(state => {
            this.updateState(state);
            console.log(this.state);
        });
    }

    ngOnDestroy(): void {
        if (this.subscription) {
            this.subscription.unsubscribe();
        }
    }

    updateState(state: boolean): void {
        this.state = state;
    }
}

和这样的装载服务

@Injectable({
    providedIn: 'root'
})
export class LoadingService {
    public state: Subject<boolean> = new Subject<boolean>();
}

和这样的加载故事

@Injectable({
    prividedIn: 'root'
})
class MockLoadingService extends LoadingService {
    static instance: MockLoadingService = null;

    constructor() {
        super();

        if (!MockLoadingService.instance) {
            MockLoadingService.instance = this;
        }

        return MockLoadingService.instance;
    } 
}

@Component({
    selector: 'app-loading',
    templateUrl: './loading.component.html',
})
class MockLoadingComponent extends LoadingComponent {
    constructor(private mockLoadingService: MockLoadingService) {
        super(mockLoadingService);
    }
}

export default {
    title: 'Loading',
    component: MockLoadingComponent,
    decorators: [
        moduleMetadata({
            declarations: [MockLoadingComponent],
            providers: [MockLoadingService],
        }),
    ],
} as Meta;

export const Loading: Story = props => ({ props });

Loading.play = async () => {
    await new Promise(resolve => {
        setTimeout(() => {
            MockLoadingService.instance.state.next(false);
            resolve(null);
        }, 2000);
    });
};

问题是： 之后npm run storybook，我可以得到状态是false，但画布面板中的加载图标仍然显示。那么如何在 Storybook 中使用 observable 或 subject 更新 Angular 组件呢？

附加说明 loading.component.html

<div *ngIf="state" class="loading" id="loading">
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="25 25 50 50" class="circular">
        <circle cx="50" cy="50" r="20" fill="none" class="path"></circle>
    </svg>
</div>

它像这样工作

ngOnInit(): void {
    this.subscription = this.loadingService.state.subscribe(state => {
        this.updateState(state);
        console.log(this.state);
    });

    setTimeout(() => {
        this.loadingService.state.next(false);
    }, 1000);
}

只是在故事书播放功能中不起作用

4

1 回答 1

0

Your subscription is subscribed to the incorrect service? Your component loads an instance of LoadingService and subscribes to that

this.loadingService.state.subscribe

yet the next statement is triggered on an instance of MockLoadingService?

MockLoadingService.instance.state.next(false);

Those two are not the same service despite one extending the other?

so solution, either use the MockLoadingService in the component constructor or trigger the next call on the LoadingService class instead of on the MockLoadingService class?

于 2022-02-14T09:46:15.557 回答