Anwenden einer css-Klasse zu einer Komponente element, wenn es ist geschaffen durch router-Steckdose?

Habe ich DOM, der ungefähr so aussieht:

<app>
    <router-outlet></router-outlet>
    <project>...</project>
</app>

wo project element wird eingefügt, indem Sie den router.

Wie füge ich eine Klasse auf dieses element?

InformationsquelleAutor Kugel | 2016-01-07

  1. 33

    Vorausgesetzt, Sie wollen immer die Klasse angewendet, um diese Komponente verwenden, können Sie host in Ihre Komponenten-Metadaten: 

    @Component({
  selector:'project',
  host: {
      class:'classYouWantApplied`
  }
})

    Ergibt: 

    <app>
    <router-outlet></router-outlet>
    <project class="classYouWantApplied">...</project>
</app>
    was, wenn Sie nicht? dabei <router-outlet class="...">... funktioniert nicht :/
    was ist, wenn ich möchte die Klasse für alle Komponenten weitergeleitet?
    zur Verdeutlichung: nachdem Sie dies getan haben, müssen Sie hinzufügen von Stil zu Stil.css... zumindest für mich, es würde nicht funktionieren, indem man es in die ein Elternteil oder ein Kind.
    ist wirklich alt, ich weiß), aber siehe meine Antwort unten, um zu sehen, wie Sie dies für alle Komponenten.

    InformationsquelleAutor drewmoore

  2. 7

    Den Schlüssel /tiefen -/ Stichwort:

        :host /deep/router-outlet + project {
        display: block;
        border: 10px solid black;
    }

    Dies funktioniert ohne zusätzliche Konfigurationen.

    :host /deep/router-outlet + * für was auch immer Komponente dynamisch erstellt Winkel-Router.

    Bearbeitet 2018/3/5:

    Seit Winkel-4.3.0 gemacht /deep/ veraltet, die vorgeschlagene alternative ist ::ng-deep. Und es gab eine lange Diskussion über diese.

    Sieht aus wie /deep/ ist veraltet. Laut diesem Problem, ::ng-deep könnte es sein, Ersatz für Sie nun.
    Danke. Ich veränderte meine Antwort.

    InformationsquelleAutor Val

  3. 4

    Können Sie die adjacent sibling selector

    router-outlet + project { ... }

    https://developer.mozilla.org/en/docs/Web/CSS/Adjacent_sibling_selectors

    aber nur, wenn @drewmoore Ansatz nicht gelten.

    es wird nicht funktionieren, es sei denn, Sie deaktivieren Stil Kapselung.

    InformationsquelleAutor Günter Zöchbauer

  4. 3

    Können Sie dies mit einer HostBinding, das ist effektiv dasselbe wie die Verwendung der host Eigenschaft, die bereits erwähnt wurden, obwohl diese Methode wirft eine TSLint Fehler mit Standard-listing-Regeln.

    In der Komponente, auf die Sie sich bewerben möchten eine Klasse:

    import { Component, HostBinding, Host (optional for typing) } from '@angular/core';

@Component({...})
export class GiveMeAClassComponent {
    @HostBinding('class.some-class') someClass: Host = true;
    ...
}

    Und dann in deinem root - styles.scss - Datei, können Sie die folgenden hinzufügen:

    .some-class {
    //Styles in here will now be applied to your GiveMeAClassComponent at a root level
}

    InformationsquelleAutor lordchancellor

  5. 3

    verwenden Sie die adjacent sibling selector und die * Platzhalter, wählen Sie das element, das unmittelbar nach der router-outlet

    Stile.css 

    router-outlet + * {
  /* your css */
}

    Anwenden einer css-Klasse zu einer Komponente element, wenn es ist geschaffen durch router-Steckdose?

    Funktioniert nicht...
    Funktioniert bei mir (chrome, firefox, ie)
    Soweit ich weiß, Eckig Bereiche der Elemente mit einem [_nghost_c1]-wie Attribut, wie router-outlet + *[_nghost_c1]. Dies ist auch Hinzugefügt, um mein css (ich bin scss zu kompilieren, vielleicht ist das der Grund), und es wird nicht angewendet, um das folgende element bezieht sich auf eine andere Weise.

    InformationsquelleAutor JED

  6. 1

    Wenn Sie brauchen, um eine Klasse bedingt ist, können Sie es hinzufügen, programmgesteuert aus der Komponente: 

    constructor(private renderer: Renderer2, private elemRef: ElementRef) {
  if(someCondition){
    renderer.addClass(elemRef.nativeElement, 'myClass');
  }
}
    Dies ist die richtige Antwort.

    InformationsquelleAutor adamdport

  7. 1
    <app>
  <div class="your css class">
   <router-outlet></router-outlet>
</div>
</app>

    Dies funktioniert für mich

    InformationsquelleAutor Awinash jaiswal

  8. 0

    Derzeit, Winkel 6 empfiehlt mir, @HostBindings und @HostListeners anstelle des host-Eigenschaft: 

    export class ProjectComponent {
  @HostBinding('class') classes = 'classYouWantApplied';
}

    InformationsquelleAutor Dmytro Krekota

Schreibe einen Kommentar