Ionic/Angular中获取元素类名并通过push传参实现页面间数据共享

嘿，刚上手Ionic和Angular的话，用路由传参实现页面间数据共享其实挺容易上手的，我给你一步步拆解具体怎么做：

第一步：在Page1中获取div类名并跳转传参 #

首先得拿到目标div的类名，再通过路由跳转把参数带过去：

1. 给目标div加模板引用变量 #

在Page1的HTML模板里，给类名为whatever的div加一个模板引用（比如#targetDiv），这样就能在TS文件里定位到这个元素：

<!-- page1.page.html -->
<div #targetDiv class="whatever">我是目标div</div>
<button (click)="goPage2()">跳转到Page2</button>

2. 在Page1的TS文件中获取类名并跳转 #

用ViewChild获取刚才的div元素，再通过Router导航到Page2时携带参数：

// page1.page.ts
import { Component, ViewChild, ElementRef } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'app-page1',
  templateUrl: './page1.page.html',
  styleUrls: ['./page1.page.scss'],
})
export class Page1Page {
  // 通过模板引用变量获取div元素
  @ViewChild('targetDiv') targetDiv!: ElementRef;

  constructor(private router: Router) { }

  goPage2() {
    // 获取div的类名
    const className = this.targetDiv.nativeElement.className;
    // 导航到Page2，通过queryParams传递参数
    this.router.navigate(['/page2'], {
      queryParams: { className: className }
    });
  }
}

第二步：在Page2中接收并使用传递的参数 #

接下来在Page2里，用ActivatedRoute来获取Page1传过来的参数：

1. 在Page2的TS文件中获取参数 #

// page2.page.ts
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-page2',
  templateUrl: './page2.page.html',
  styleUrls: ['./page2.page.scss'],
})
export class Page2Page implements OnInit {
  receivedClassName!: string;

  constructor(private route: ActivatedRoute) { }

  ngOnInit() {
    // 方式一：快照获取（适合参数不会动态变化的场景）
    const className = this.route.snapshot.queryParamMap.get('className');
    if (className) {
      this.receivedClassName = className;
      console.log('从Page1拿到的类名：', this.receivedClassName);
      // 这里写你后续的业务逻辑，比如渲染样式、调用接口等
    }

    // 方式二：订阅获取（适合参数可能动态更新的场景）
    // this.route.queryParams.subscribe(params => {
    //   const className = params['className'];
    //   if (className) {
    //     this.receivedClassName = className;
    //     console.log('订阅拿到的类名：', this.receivedClassName);
    //   }
    // });
  }
}

2. （可选）在Page2的HTML中展示参数 #

如果需要在页面上显示拿到的类名，直接绑定变量即可：

<!-- page2.page.html -->
<p>从Page1传递过来的类名：{{ receivedClassName }}</p>

额外小提示 #

• 确保你已经在app-routing.module.ts里配置了Page2的路由，比如：

  const routes: Routes = [
    // ...其他路由
    { path: 'page2', component: Page2Page }
  ];
  

• 如果不想把参数暴露在URL里，可以用路由state传参（注意：刷新页面会丢失参数）：
  Page1跳转时改成：

  this.router.navigate(['/page2'], {
    state: { className: className }
  });
  

  Page2获取时：

  const className = window.history.state.className;
  

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