Question

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

<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是showMessage的孩子？

应该根据TabService数据属性中OkHttpClient的值隐藏范围。

选项卡2也应如此...选项卡1和选项卡2都应独立运行。

Answer 1

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

换句话说，您需要根据showMessage内部的订阅来设置TabService。

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

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();
}

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

1 个答案: