时间戳

首页 > 解决方案 > 使用服务显示/隐藏组件内的元素

angular - 使用服务显示/隐藏组件内的元素

问题描述

我创建了一个 Tabs 组件，并按如下方式使用它（StackBlitz 示例）：

<tabs>

  <tab title="Tab 1">
    <div toolbar>
      <message><span>Message 1: </span></message>
      <span>Note 1</span>
    </div>
    <content1>
      <p>Content 1</p>
    </content1>
  </tab>

  <tab title="Tab 2">
    <div toolbar>
      <message><span>Message 2: </span></message>
      <span>Note 2</span>
    </div>
    <content2>
      <p>Content 2</p>
    </content2>
  </tab>

</tabs>

我需要data在每个内部共享一些，tab所以我创建了一个 TabService：

@Injectable({
  providedIn: 'root' // >> Not sure if this should be in root ...
})

export class TabService {
  data: any;  
}

作为示例，我将内部数据定义content1为可观察对象，并使用它来定义以下数据TabService：

export class Content1Component implements OnInit {

  constructor(private tabService: TabService) { }

  ngOnInit() {

    this.getData().subscribe(x => {
      this.tabService.data = x;
    });

  }

  public getData() {

    let data$ = new Observable(observer => {
      setTimeout(() => {
        observer.next({ showMessage: true });
        observer.complete();
      }, 1000);
     });

     return data$;

  }

}

而且我还在 TabComponent 中注入了 TabService：

@Component({
  selector: 'tab',
  templateUrl: './tab.component.html',
  styleUrls: ['./tab.component.css'],
  providers: [TabService]
})

export class TabComponent implements OnInit {

  @Input() active: boolean;
  @Input() title: string;

  constructor(private tabService: TabService) { }

  ngOnInit() {

    // I tried to log the value of tabService.data but it is undefined (??)
    this.tabService.data.subscribe(data => console.log(data));

  }

}

问题

问题是如何隐藏两个跨度在Tab 1哪里content1：

    <message><span>Message 2: </span></message>
    <span>Note 2</span>

一个是的孩子，tab1另一个是message哪个孩子的孩子tab1？

跨度应根据showMessageTabService 数据属性中的值隐藏。

这同样适用于 Tab 2 ... Tab 1 和 Tab 2 都应该独立运行。

标签： angulartypescriptangular8angular-observable

解决方案

应根据 TabService 数据属性中 showMessage 的值隐藏跨度。

换句话说，您需要showMessage根据TabService.

这是一个带有 的可注入服务的小示例showMessageSubscription，一旦.next(..)使用其当前值触发，其他所有组件都可以使用 订阅它.subscribe(..)。

tabs.service.ts：

@Injectable()
export class TabService {
    showMessageSubscription = new Subject<Boolean>();
    showMessage: Boolean;

    setShowMessage(showMessage: Boolean) {
        this.showMessage = showMessage;
        this.showMessageSubscription.next(this.showMessage);
    }
}

content1.component.ts：

export class Content1Component implements OnInit {
    showMessage: Boolean;
    private subscription: Subscription;
    constructor(private tabService: TabService) { }

    ngOnInit() {    
          this.subscription = this.tabService.showMessageSubscription
              .subscribe(
                (showMessage: Boolean) => {
                  console.log(showMessage);
                  this.showMessage = showMessage;
                }
          );

          this.fakeSetShowMessage();
    }

    public fakeSetShowMessage() {
        setTimeout(() => {
            this.tabService.setShowMessage(true);
        }, 1000);

        setTimeout(() => {
            this.tabService.setShowMessage(false);
        }, 5000);
    }
}

为避免内存泄漏，您需要实现OnDestroy：

ngOnDestroy() {
    this.subscription.unsubscribe();
}

推荐阅读