Question

这与我的问题here一致，但现在我有了一个新问题。

我的应用程序显示了一个瓷砖仪表板。我使用Subjects进行组件通信。从仪表板中删除磁贴后，我需要tile-details.component视图中的数据消失。实际上，删除磁贴后数据仍保留在详细信息视图中。

我想通过操纵数据流（详细信息主题）来实现这一目标，因为这是tile-details.component的反应。

这是服务：

@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>

瓦片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);
  }

}

瓦片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

根据您的图块详细信息组件中的内容，您只需要null tile属性null。追溯通过磁贴服务和信息中心，您只需在remove方法中通过仪表板推送服务中的新this.tileService.addDetail(null);值：

selectedTile: Tile;

<强>更新

根据您在下面的评论，您需要更新信息中心组件以保留详细视图中显示的选定图块。

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

现在，当您选择一个磁贴时，您不仅需要使用您的服务，还需要将此新属性设置为它：

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

此外，您需要修改删除代码（代替上面的原始代码）：

        <div class="sidebar-collapse">
            <ul class="nav" id="main-menu">

                <li>
                    <a href="dashboard.php"><i class="fa fa-dashboard"></i> Dashboard</a>
                </li>
                <li>
                    <a href="ui-elements.html"><i class="fa fa-desktop"></i> UI Elements</a>
                </li>
                <li>
                    <a href="chart.html"><i class="fa fa-bar-chart-o"></i> Charts</a>
                </li>
                <li>
                    <a href="tab-panel.html"><i class="fa fa-qrcode"></i> Tabs & Panels</a>
                </li>

                <li>
                    <a href="table.html"><i class="fa fa-table"></i> Responsive Tables</a>
                </li>
                <li>
                    <a href="form.php"><i class="fa fa-edit"></i> Forms </a>
                </li>


                <li>
                    <a href="class.php"><i class="fa fa-sitemap"></i> Class<span class="fa arrow"></span></a>
                    <ul class="nav nav-second-level">
                        <li>
                            <a href="class.php">Class</a>
                        </li>
                        <li>
                            <a href="Section.php">Section</a>
                        </li>
                    </ul>
                </li>
                <li>
                    <a href="empty.html"><i class="fa fa-fw fa-file"></i> Empty Page</a>
                </li>
            </ul>

        </div>

Angular和RxJS：更新主题？

1 个答案: