angular 组件传值交互

组件1 

html

<button (click)="showView(entity)">数据预览</button>

ts

import { DataSharingService } from "../../components/test";

constructor(private dataService: DataSharingService){}

showView(data) {

    this.dataService.toggleButton(true);

}

test文件

import { Injectable } from '@angular/core';

import { BehaviorSubject } from 'rxjs';

@Injectable({

  providedIn: 'root'

})

export class DataSharingService {

  private showButtonSubject = new BehaviorSubject<boolean>(true);默认值true

  public showButton$ = this.showButtonSubject.asObservable();

  public toggleButton(value: boolean): void {

    this.showButtonSubject.next(value);

  }

}

组件2

ts

import { DataSharingService } from './test';

constructor(private dataService: DataSharingService){}

 showBtn:Boolean=true;

 this.dataService.showButton$.subscribe((value: boolean) => {

      this.showBtn = value;

    });

html

<section *ngIf="showBtn" >

   .......

    </section>