如何在浏览器为移动端尺寸时启用routerLink？

首先得说，你原来用jQuery直接修改DOM属性的方式在Angular里是行不通的——因为Angular是数据驱动的框架，指令（比如routerLink）是在组件初始化阶段由Angular解析的，事后通过jQuery添加的属性不会被Angular识别，自然也不会生效。下面给你两种符合Angular最佳实践的解决方案：

方案一：通过状态变量绑定routerLink（推荐） #

核心思路是：监听窗口尺寸变化，维护一个isMobile状态变量，然后在模板里通过条件绑定来控制routerLink的启用/禁用。

1. 组件类代码 #

import { Component, OnInit, HostListener } from '@angular/core';
import { Router } from '@angular/router'; // 如果需要在方法里导航，记得导入

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponentComponent implements OnInit {
  isMobile = false;
  colW = 248;
  resizeTimeout: any; // 用于防抖，避免resize频繁触发

  // 你的其他变量
  suggestions: any[] = [];
  suggestionsLoading = false;
  suggestionTypeahead: any;
  selectedSuggestion: any;
  searchName = '';

  constructor(private router: Router) {} // 注入Router

  ngOnInit(): void {
    // 初始化时先判断一次屏幕尺寸
    this.checkScreenSize();
  }

  // 监听窗口resize事件
  @HostListener('window:resize', ['$event'])
  onResize(event: Event): void {
    // 防抖处理，200ms内只执行一次
    clearTimeout(this.resizeTimeout);
    this.resizeTimeout = setTimeout(() => {
      this.checkScreenSize();
    }, 200);
  }

  // 核心：判断屏幕尺寸，更新状态和colW
  private checkScreenSize(): void {
    const windowWidth = window.innerWidth;
    
    if (windowWidth >= 360 && windowWidth <= 520) {
      this.isMobile = true;
      // 根据宽度设置colW
      if (windowWidth <= 400) {
        this.colW = 150;
      } else if (windowWidth <= 440) {
        this.colW = 188;
      } else if (windowWidth <= 480) {
        this.colW = 200;
      } else {
        this.colW = 240;
      }
    } else {
      this.isMobile = false;
      this.colW = 248;
    }
  }

  // 你的onClickSearch方法，注意routerLink需要返回路由路径（如果是直接导航）
  onClickSearch(): any[] {
    // 示例：返回路由数组，比如跳转到搜索页并携带参数
    return ['/search', this.selectedSuggestion];
  }

  // 如果你的onClickSearch是触发操作而非返回路径，用这个版本：
  // onClickSearch(): void {
  //   this.router.navigate(['/search'], { queryParams: { q: this.selectedSuggestion } });
  // }
}

2. 模板代码 #

如果onClickSearch返回路由路径，直接绑定条件式routerLink：

<ng-select 
  [items]="suggestions" 
  <!-- 当isMobile为true时启用routerLink，否则设为null禁用 -->
  [routerLink]="isMobile ? onClickSearch() : null" 
  bindLabel="text" 
  autocomplete="off" 
  [loading]="suggestionsLoading" 
  [typeahead]="suggestionTypeahead" 
  class="form-control suggestion" 
  placeholder="{{searchName | titlecase}}" 
  [clearable]="false" 
  appendTo=".search-form-container" 
  [(ngModel)]="selectedSuggestion"
>
</ng-select>

如果onClickSearch是点击触发的方法（而非返回路径），改用条件式点击事件：

<ng-select 
  [items]="suggestions" 
  <!-- 只有移动端才触发点击方法 -->
  (click)="isMobile && onClickSearch()" 
  bindLabel="text" 
  autocomplete="off" 
  [loading]="suggestionsLoading" 
  [typeahead]="suggestionTypeahead" 
  class="form-control suggestion" 
  placeholder="{{searchName | titlecase}}" 
  [clearable]="false" 
  appendTo=".search-form-container" 
  [(ngModel)]="selectedSuggestion"
>
</ng-select>

方案二：使用媒体查询结合Angular的BreakpointObserver（更优雅的响应式方案） #

如果你的项目已经引入了@angular/cdk/layout，可以用BreakpointObserver来监听屏幕断点，这比手动监听resize更简洁：

组件类代码片段 #

import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';

// ...

constructor(private breakpointObserver: BreakpointObserver) {}

ngOnInit(): void {
  this.breakpointObserver.observe([
    '(min-width: 360px) and (max-width: 520px)'
  ]).subscribe(result => {
    this.isMobile = result.matches;
    // 根据当前屏幕宽度设置colW
    if (this.isMobile) {
      const windowWidth = window.innerWidth;
      // ... 这里和之前的colW判断逻辑一样
    } else {
      this.colW = 248;
    }
  });
}

这种方式不需要手动处理resize防抖，Angular CDK已经帮你封装好了。

关键注意点 #

• 永远不要在Angular里用jQuery直接操作DOM属性来控制Angular指令，这会绕过Angular的变更检测，导致不可预期的问题。
• routerLink接受的是路由路径（字符串或数组），如果你的onClickSearch是执行操作而非返回路径，应该用(click)事件结合条件判断，而不是绑定到routerLink。

内容的提问来源于stack exchange，提问作者JAIME GAFFOD JR