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

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 的标志值。

组件

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

Angular 6 - Hide or Show a Div in component triggered from a Service

typescript

angular

angular6