J'ai un composant avec référence. Je passe cette référence au service où, après avoir promis, je crée un nouveau conteneur dans le composant hôte :

@Component({
  selector: 'app-map',
  templateUrl: './map.component.html',
  styleUrls: ['./map.component.scss'],
  providers: [MapService],
})
export class MapComponent implements OnInit {
   constructor(private el: ElementRef, private mapService: MapService) {
       this.mapService.set(this.el.nativeElement);
   } 
}

En conséquence, j'obtiens cette structure DOM :

<app-map>
    <div id="created"></div>
</app-map>

Pourquoi, lorsque j'essaie de styliser map.component.scss, cela ne s'applique pas à ce conteneur :

#created {
    padding: 10px;
    background: #ccc;
    width: 400px;
    height: 300px;
}

L'élément DOM du résultat ressemble à :

<app-map time="3000" _nghost-rpv-c11="" ng-version="11.0.9">
   <div id="created"></div>
</app-map>
4
user13314476 21 mars 2021 à 22:30

2 réponses

Meilleure réponse

C'est attendu. c'est ainsi que fonctionne l'encapsulation de style angulaire. pour y remédier, supprimez l'encapsulation de ce composant en

@Component({
  selector: 'app-map',
  templateUrl: './map.component.html',
  styleUrls: ['./map.component.scss'],
  providers: [MapService],
  encapsulation: ViewEncapsulation.None // here we turn of styles modification for this component
})
2
Andrei 21 mars 2021 à 22:55

Vous pouvez quelques options ici

  1. déclarer le style créé globalement, c'est-à-dire utiliser "styles.scss" et y ajouter le style, qui sera appliqué quelle que soit la limite du composant.

  2. utiliser ng profondément dans le composant scss, c'est-à-dire dans map.component.scss utiliser

    :host::ng-deep {
       #created {
           padding: 10px;
           background: #ccc;
           width: 400px;
           height: 300px;
       }
     }
    

La troisième consiste bien sûr à supprimer l'isolement de style, mais c'est dangereux car tout style déclaré dans map.component.scss sera applicable globalement sans limite de composant.

0
Suresh Nagar 22 mars 2021 à 05:57