Puede actualizar los estilos del componente secundario a través del componente principal utilizando lo siguiente,

• La ::ng-deep . Al aplicarlo a cualquier regla CSS, se deshabilitó completamente la encapsulación de vista para esa regla. Para aplicar el estilo especificado al componente actual y sus descendientes, agregue el selector :host antes ::ng-deep , ya que sin él los estilos aplicados pueden pasar a otros componentes.
• Aplicar ViewEncapsulation.None dentro del componente en el que se carga el componente secundario.

Por lo tanto, utilizando los enfoques mencionados anteriormente, puede modificar los estilos para app-search-footer como se muestra en los fragmentos de código a continuación,

• Usando la ::ng-deep ,

En el archivo componente.css,

 ::host ::ng-deep app-search-footer { /* Add required CSS rules */ }

• Uso ViewEncapsulation.None

En el archivo componente.ts,

 import { Component, ViewEncapsulation, OnInit } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: '<div class="container"><app-search-footer></app-search-footer></div>', styleUrls: ['`.container .app-search-footer-container { /* Required CSS rules */ }`'], encapsulation: ViewEncapsulation.None }) export class Component implements OnInit { ngOnInit(): void { } }

Puede, por ejemplo, usar Input para controlar esto como

 <app-search-footer version='search'></app-search-footer>

En el componente:

 @Input() version: 'search' | 'footer' = 'footer';

En la plantilla de componentes en los lugares respectivos:

 class="some-element {{version}}"

En el css (scss en este caso) por ejemplo:

 .some-element { &.search { background-color: red; } &.footer { background-color: green; } }

La mejor manera de hacer esto, por supuesto, también depende de lo que se debe cambiar (por ejemplo, si se trata de todo el componente o de partes muy específicas).
Si es el componente completo, también podría simplemente hacer <app-search-footer class='search'></app-search-footer> .

Hay bastantes maneras de lograr cosas como esta antes de tener que depender de :host ::ngdeep .

además, si desea cambiar los datos en un solo componente sin afectar al otro, también puede usar @Input decoratos para lograrlo

este es mi panel de búsqueda <app-search-footer> que voy a usar también como pie de página pero con algunos ajustes

este es también mi componente <app-search-footer> pero aquí lo estoy usando como pie de página y, como puede ver en la imagen, agregué una nueva imagen de logotipo de regla horizontal y tres párrafos nuevos (Términos de uso, Política de privacidad y Acerca de) Nosotros) hice esto agregando estas variables Input() en mi archivo componente.ts de pie de página de búsqueda

 @Input() termsOfUse = ''; @Input() privacyPolicy = ''; @Input() aboutUs = ''; @Input() hr: boolean = false; @Input() footerImage = '';

en mi archivo html agregué estos

 <img src="{{footerImage}}" class="brand" alt=""> <hr style="color: #ffffff;" *ngIf="hr"> <p class="footer-pargraphs">{{termsOfUse}}</p> <p class="footer-pargraphs">{{privacyPolicy}}</p> <p class="footer-pargraphs">{{aboutUs}}</p>

cuando reutilicé este componente como pie de página, solo vinculé mis datos a las entradas del componente de pie de página de búsqueda así

 <app-search-footer [termsOfUse]="'Terms of Use'" [hr]=true [footerImage]="'assets/download.png'" [privacyPolicy]='"Privacy Policy"' [aboutUs]="'About us'" *ngIf="!collapsed" ></app-search-footer>

y pude modificar el pie de página sin afectar mi panel de búsqueda. La única desventaja de esto es que en su componente base (pie de página de búsqueda en mi caso) habrá elementos con valores vacíos y, por lo tanto, habrá espacio vacío en su DOM.