Question

我有一个服务，它有一个可以做某事的方法。

service.ts：

doSomething() {
    // Does something here
}

此服务与以下组件进行对话：

myComponent.ts

我有：myComponent.html有一个div：

<div class="myDiv">Something Here</div>

我想要的是在服务doSomething（）方法中按代码显示和隐藏div。

喜欢这样：

doSomething() {

    1. Show myDiv   
    2. // Do something here
    3. Hide myDiv
}

我该怎么做？

Answer 1

特别是我在doSomenthing（）方法中插入一组标志值来控制div。

<强> COMPONENT

doSomething() {
  service
    .doSomething()
    .subscribe(
       r => {
          this.show = true;   
          2. // Do something here
          this.show = false;  
       }
    );
}

<div *ngIf="show" class="myDiv">Something Here</div>

但是这段代码必须留在不在服务中的组件中。

Answer 2

将ngIf属性添加到标记：

*ngIf="IAmDoingSomething"

在组件中，您可以执行以下操作：

export class MyDoSomethingComponent{
public IAmDoingSomething = false;
...
   invokeServices = async  () => {
       this.IAmDoingSomething = true;
       await doSomething();
       this.IAmDoingSomething = false;
    }
...
}

Angular 6 - 隐藏或显示从服务触发的组件中的Div

2 个答案: