在Angular中如何修改复用组件的内容和样式且不影响其他实例

你可以通过以下几种方案实现不同组件实例的差异化修改，不会互相影响： #

方案1：给组件加输入属性控制样式和内容（最推荐） #

适合同时需要修改内容和样式的场景，通过自定义输入参数标记组件使用场景：

1. 先在search-footer.component.ts里定义输入属性：

import { Input } from '@angular/core';

// 组件类内部
@Input() usageScenario: 'navbar' | 'footer' = 'navbar';

2. 调用组件时传入对应参数：
   页脚处的调用修改为：

<app-search-footer usageScenario="footer"></app-search-footer>

navbar里的调用保持默认或者显式传usageScenario="navbar"即可。
3. 组件内部根据属性值做差异化处理：
模板里控制内容显示：

<!-- 仅页脚场景展示的内容 -->
<div *ngIf="usageScenario === 'footer'">页脚独有的备案信息、版权声明等内容</div>
<!-- 仅导航栏搜索场景展示的内容 -->
<div *ngIf="usageScenario === 'navbar'">搜索栏独有的热门搜索标签等内容</div>

样式里区分不同场景：

/* 页脚场景专属样式 */
:host([usageScenario="footer"]) {
  background: #f5f5f5;
  padding: 24px 0;
  border-top: 1px solid #eee;
}
/* 导航栏搜索场景专属样式 */
:host([usageScenario="navbar"]) {
  background: #fff;
  padding: 8px 16px;
}

方案2：样式穿透修改（仅适合样式差异化需求） #

如果只需要修改页脚处的样式、不需要调整内容，可以直接在父组件（也就是当前写页脚<app-search-footer>的组件）的样式文件里加范围限定的穿透规则：

/* 加:host限定仅当前父组件下的app-search-footer生效，不会影响其他地方的组件实例 */
:host ::ng-deep app-search-footer {
  height: 120px;
  color: #666;
}

方案3：内容投影实现差异化（适合内容差异较大的场景） #

如果两个场景下的自定义内容占比很高，可以用ng-content预留插槽：

1. search-footer组件模板内预留插槽：

<!-- 公共的搜索功能区域 -->
<div class="search-bar-common">
  <input type="text" placeholder="请输入搜索关键词">
  <button>搜索</button>
</div>
<!-- 自定义内容插槽 -->
<ng-content></ng-content>

2. 调用时传入对应场景的自定义内容：
   页脚处调用：

<app-search-footer>
  <div class="footer-extra">© 2024 所有权利保留</div>
</app-search-footer>

navbar处调用：

<app-search-footer>
  <div class="navbar-extra">热门搜索：前端 后端 产品</div>
</app-search-footer>

对应自定义内容的样式可以直接在父组件或者组件内部写对应类的规则即可。

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