如何使公共组件内的指定Div仅在特定页面显示，其余页面隐藏？

给你几个实用的实现方案，都是基于Angular场景的（从你用的*ngIf和mat-slide-toggle能看出来）：

方案一：通过输入属性传参控制 #

这是最直接的方式，让调用组件的页面自己决定是否显示：

1. 在公共组件的.ts文件里定义一个输入属性：

   import { Input } from '@angular/core';
   
   @Input() showToggleArea = false;
   

2. 把模板里的*ngIf="isVisible"改成*ngIf="showToggleArea"
3. 在目标页面使用公共组件时，传入true：

   <app-your-common-component [showToggleArea]="true"></app-your-common-component>
   

4. 其他页面使用时不用传这个参数，或者显式传false，滑块区域就会默认隐藏

方案二：通过路由自动判断 #

如果不想每个页面都手动传参，可以让组件自己识别当前路由：

1. 在公共组件里注入路由服务，监听当前路径：

   import { ActivatedRoute } from '@angular/router';
   import { OnInit } from '@angular/core';
   
   export class YourCommonComponent implements OnInit {
     isVisible = false;
   
     constructor(private route: ActivatedRoute) {}
   
     ngOnInit() {
       // 监听路由变化，判断是否是目标页面
       this.route.url.subscribe(urlSegments => {
         const currentPath = urlSegments.map(seg => seg.path).join('/');
         // 把这里的'/target-page'换成你目标页面的实际路由路径
         this.isVisible = currentPath === '/target-page';
       });
     }
   }
   

2. 这样不管怎么跳转，组件都会自动根据当前路由显示或隐藏滑块区域，不用页面额外处理

方案三：通过全局服务共享状态 #

如果你的场景更复杂（比如需要跨组件传递状态），可以用全局服务：

1. 先创建一个状态服务：

   import { Injectable } from '@angular/core';
   import { BehaviorSubject } from 'rxjs';
   
   @Injectable({ providedIn: 'root' })
   export class ToggleVisibilityService {
     private showToggleSubject = new BehaviorSubject<boolean>(false);
     showToggle$ = this.showToggleSubject.asObservable();
   
     setShowToggle(show: boolean) {
       this.showToggleSubject.next(show);
     }
   }
   

2. 在公共组件里订阅这个状态：

   import { ToggleVisibilityService } from './toggle-visibility.service';
   import { OnInit, OnDestroy } from '@angular/core';
   import { Subscription } from 'rxjs';
   
   export class YourCommonComponent implements OnInit, OnDestroy {
     isVisible = false;
     private subscription!: Subscription;
   
     constructor(private toggleService: ToggleVisibilityService) {}
   
     ngOnInit() {
       this.subscription = this.toggleService.showToggle$.subscribe(show => {
         this.isVisible = show;
       });
     }
   
     ngOnDestroy() {
       this.subscription.unsubscribe();
     }
   }
   

3. 在目标页面的生命周期钩子中设置状态：

   import { ToggleVisibilityService } from './toggle-visibility.service';
   import { OnInit, OnDestroy } from '@angular/core';
   
   export class TargetPageComponent implements OnInit, OnDestroy {
     constructor(private toggleService: ToggleVisibilityService) {}
   
     ngOnInit() {
       this.toggleService.setShowToggle(true);
     }
   
     ngOnDestroy() {
       this.toggleService.setShowToggle(false);
     }
   }
   

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