Angular4中RouterLink优化：实现在当前页面堆叠div需求

Got it, let's tackle this problem step by step. You want to replace the new-window routerLink behavior with an in-page stacked div/info-feed style where clicking a link adds a new detail panel above the existing ones. Here's how you can pull this off in Angular 4:

1. Ditch the New-Window RouterLink Behavior #

First, get rid of any target="_blank" on your links and replace the routerLink with a custom click handler. We don't want full page navigation—we need to dynamically add content to the current view instead.

2. Create a Service to Manage the Detail Stack #

We'll use a service to keep track of all open details, so the state stays consistent if you need to share it across components. This service will handle adding/removing details and notify components when the stack updates.

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

@Injectable()
export class DetailStackService {
  private detailStack: any[] = [];
  stackUpdated = new Subject<any[]>();

  // Add new detail to the TOP of the stack
  addDetail(detailData: any) {
    this.detailStack.unshift(detailData);
    this.stackUpdated.next([...this.detailStack]);
  }

  // Remove a detail by index
  removeDetail(index: number) {
    this.detailStack.splice(index, 1);
    this.stackUpdated.next([...this.detailStack]);
  }

  // Get a copy of the current stack
  getCurrentStack() {
    return [...this.detailStack];
  }
}

3. Update Your Parent Component #

Modify your main component to use the service, handle click events, and render the stacked details.

Component Template

<!-- Container for stacked detail panels -->
<div class="detail-stack">
  <div *ngFor="let detail of detailStack; let i = index" class="detail-panel">
    <!-- Close button to remove the panel -->
    <button (click)="removeDetail(i)" class="close-btn">×</button>
    
    <!-- Your existing detail content -->
    <h3>{{detail.title}}</h3>
    <div class="detail-content">{{detail.content}}</div>
    
    <!-- Links inside the detail that open new panels -->
    <a (click)="addNewDetail(detail.linkedItem)" href="javascript:void(0)">
      View {{detail.linkedItem.title}}
    </a>
  </div>
</div>

<!-- Original list of items with links -->
<div class="item-list">
  <div *ngFor="let item of items">
    <h4>{{item.title}}</h4>
    <a (click)="addNewDetail(item)" href="javascript:void(0)">
      View Full Detail
    </a>
  </div>
</div>

Component TypeScript

import { Component, OnInit } from '@angular/core';
import { DetailStackService } from './detail-stack.service';

@Component({
  selector: 'app-detail-list',
  templateUrl: './detail-list.component.html',
  styleUrls: ['./detail-list.component.css']
})
export class DetailListComponent implements OnInit {
  detailStack: any[] = [];
  // Replace with your actual item data
  items = [
    { 
      id: 1, 
      title: "First Item", 
      content: "Full detail content for the first item",
      linkedItem: { id: 2, title: "Related Item 2", content: "Detail for related item 2" }
    },
    { 
      id: 2, 
      title: "Second Item", 
      content: "Full detail content for the second item",
      linkedItem: { id: 3, title: "Related Item 3", content: "Detail for related item 3" }
    }
  ];

  constructor(private detailStackService: DetailStackService) { }

  ngOnInit() {
    // Initialize stack and listen for updates
    this.detailStack = this.detailStackService.getCurrentStack();
    this.detailStackService.stackUpdated.subscribe(updatedStack => {
      this.detailStack = updatedStack;
    });
  }

  addNewDetail(item: any) {
    // Pass the clicked item's data to the service
    this.detailStackService.addDetail(item);
  }

  removeDetail(index: number) {
    this.detailStackService.removeDetail(index);
  }
}

4. Style for Stacked Effect #

Add CSS to make the panels stack visually, with new panels appearing above older ones:

.detail-stack {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 2rem;
}

.detail-panel {
  padding: 1.5rem;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  background: white;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.close-btn {
  float: right;
  border: none;
  background: transparent;
  font-size: 1.2rem;
  cursor: pointer;
}

.item-list {
  padding-top: 1rem;
  border-top: 1px solid #eee;
}

Key Notes #

• We're using unshift() to add new details to the start of the stack, so they render first (and appear above older panels in the flex column).
• The service uses a Subject to notify the component when the stack changes, ensuring the view updates automatically.
• If your details are complex, you can replace the plain div with an Angular component using ComponentFactoryResolver for more modularity.

内容的提问来源于stack exchange，提问作者Break