Angular 4 Komponente und CSS-flex um

Ich habe einen Plunker hier - https://plnkr.co/edit/rnN8oQAsIcYWjsjQHfuk?p=preview Angular 4 Komponente und CSS-flex um

Es ist ein einfacher nav Stil eingerichtet mit display: flex; und order die Elemente

Die Elemente verwenden flex zu positionieren, um sie 1, um zu bestellen 2, 3, 4

Dies ist grundlegend, aber der eigentliche Code braucht die Reihenfolge.

Die obere nav ist nur vier div Einrichtungen in der HTML, und sie sind 1 bestellt, 2, 3, 4

Die untere nav die gleiche wie oben ist, aber das Element ‚drei‘ wird als eine Komponente zugesetzt.

Die HTML und Klasse in der 'Drei' Komponente ist die gleiche wie die 'Drei' in der Top-Nav.

Die Flex-Reihenfolge scheint auf der Angular-Komponente nicht zu funktionieren.

Kann mir jemand sagen, warum das nicht funktioniert und wie man es beheben kann.

<div class="nav-container"> 

    <div class="nav"> 

    <div class="nav-item nav-item-one"> 
     One 
    </div> 

    <div class="nav-item nav-item-two"> 
     Two 
    </div> 

    <div class="nav-item nav-item-three"> 
     Three 
    </div> 

    <div class="nav-item nav-item-four"> 
     Four 
    </div> 

    </div> 

</div> 


<div class="nav-container"> 

    <div class="nav"> 

    <div class="nav-item nav-item-one"> 
     One 
    </div> 

    <div class="nav-item nav-item-two"> 
     Two 
    </div> 

    <three></three> 

    <div class="nav-item nav-item-four"> 
     Four 
    </div> 

    </div> 

</div>

Quelle

2017-12-20 ttmt

Als ich Lauf deinen Plnrr, sie sehen beide gleich aus. Ich verstehe nicht, was das Problem hier ist. –

Der erste Block ist eins, zwei, drei, vier der zweite ist drei, eins, zwei, vier. Die Reihenfolge auf dem Drei-Element ist nicht funktioniert – ttmt

Es scheint, Sie haben Sie geändert/aktualisiert Ihre ursprüngliche gepostet PLNKR? ... wie es funktioniert und der 3. ist 3. in beiden 'nav-Container's. Das ist genau der Grund, warum der ursprüngliche Code als funktionierendes Code-Snippet innerhalb der Frage veröffentlicht werden sollte, damit seine ursprüngliche Codebasis erhalten bleibt. Jeder zukünftige Benutzer wird nun nicht in der Lage sein, den Unterschied zwischen dem, was Sie gefragt haben, und dem, was Sie bekommen haben, wirklich zu verstehen. – LGSon

Das Problem ist, wenn Winkel Ihre Komponente macht es hüllt seine Innenansicht mit einem Elemente three genannt. Wenn Sie Ihr DOM überprüfen, sehen Sie es. Um es zu beheben, müssen Sie, um three in Ihrer CSS-Datei geben (entweder style.css oder Komponente CSS-Datei) wie folgt

in style.css

.nav-item-three, three{ 
    order: 3; 
}

oder Komponente CSS-Datei

three { 
    order: 3; 
}

Quelle

2017-12-20 20:42:29

Angular 4 Komponente und CSS-flex um

Antwort

Verwandte Themen