Angular和RxJS：更新主题？

Question

This is along the lines of my question here but now I have a new issue.

My app shows a dashboard of tiles. I'm using Subjects for component communication. When a tile is removed from the dashboard, I need the the data from the tile-details.component 's view to disappear. As it is, the data remains in the details view after the tile is removed.

I wanted to accomplish this by manipulating the data stream (the details subject), since that is what tile-details.component is reacting to.

Here's the service:

@Injectable()
export class TileService {

  tile  = new Subject<any>();
  details  = new Subject<any>();

  tiles = [];

  constructor() { }

  getTiles(): Observable<Tile[]> {
    return of (TILES);
  }

  addTile(data) {
    this.tile.next(data);
  }

  addDetail(data) {
   this.details.next(data);
  }
}

dashboard.component.ts:

@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.css']
})
export class DashboardComponent implements OnInit {

  title = 'Dashboard';

  // Tiles to show on dashboard
  tiles = [];

  editing = false;

  constructor(private tileService: TileService) { }

  ngOnInit() {
    // We only want tiles that have been clicked on in available-tiles.component to show in the dashboarrd.
    // The available-tiles.component adds to the tiles subject when a tile is clicked.
    // Populate the tiles array based on the data stream from the tile subject.
    this.tileService.tile.subscribe(x => this.populateTilesArr(x));
  }

  populateTilesArr(t: Tile) {
    if (this.tiles.indexOf(t) === -1) {
      this.tiles.push(t);
    }
  }

  remove(t) {
     // remove tile from array
    const index = this.tiles.indexOf(t);
    this.tiles.splice(index, 1);

   // *** Do something with details subject here? ***

    if (this.tiles.length < 1) {
      this.editing = false;
    }

  }

  displayDetails(t: Tile) {
    this.tileService.addDetail(t);
  }

}

dashboard.component.html:

<div class="wrapper">
  <h3>{{ title }}</h3>
  <p *ngIf="tiles.length >= 1; else instructions">Click a tile to view code snippets</p>
  <ng-template #instructions>
      Click a tile from the selection on the left to populate the dashboard.
  </ng-template>
<div *ngIf="tiles.length >= 1">
    <button (click)="editing = true" [disabled] = "editing">Edit Dashboard</button>
    <button *ngIf="editing" (click)="editing = false">Done</button>
</div> 
  <ul>
      <li *ngFor = "let tile of tiles" (click)="displayDetails(tile)">
        <button  *ngIf="editing" class="remove" (click)="remove(tile)">X</button>
        <span class="title">{{tile.title}}</span> 
        <span class="desc">{{tile.description}}</span>
    </li>
  </ul>
</div>

tile-detail.component.ts:

@Component({
  selector: 'app-tile-detail',
  templateUrl: './tile-detail.component.html',
  styleUrls: ['./tile-detail.component.css']
})
export class TileDetailComponent implements OnInit {

  tile: Tile;

  constructor(private tileService: TileService) { }

  ngOnInit() {
    this.tileService.details.subscribe(x => this.tile = x);
  }

}

tile-detail.component.html:

<div class="wrapper" *ngIf="tile">
  <hr>
  <h2>{{ tile.title }} </h2>
  <p>{{tile.description}}</p>
    <code>{{tile.code.snippetA}}</code>
    <code>{{tile.code.snippetB}}</code>
    <code>{{tile.code.snippetC}}</code>
</div>

Answer 1

Based on what you have in your tile detail component, you should just need to null out your tile property. Tracing back through the tile service and dashboard, you can just push a new null value in your service from your dashboard like this in your remove method:

this.tileService.addDetail(null);

Update

Based on your comment below, you'll need to update your dashboard component to hold onto the selected tile shown in the detail view.

selectedTile: Tile;

Now when you select a tile you need to not only use your service, you need to set this new property to it:

displayDetails(t: Tile) {
    this.tileService.addDetail(t);
    this.selectedTile = t;
}

Additionally, you need to modify the remove code to this (in place of the original code above):

if (this.selectedTile === tile) {
    this.displayDetails(null);
}