Kann eine eckige 2-Komponente mit einem Attributselektor verwendet werden?

Wir haben derzeit eine bestehende kleine Winkel-1-Projekt, das verwendet wird, in eine lokale Sharepoint 2013-Umgebung. Für einen großen Teil unserer Inhalte verwenden wir veröffentlichen von Seiten auf der Sharepoint-Umgebung.

Mit Winkel 1, wir definieren Richtlinien beschränkt zu sein: match-Attribut name, tag-Namen, Kommentare oder Klasse name. Die meisten der Direktiven, die wir geschaffen wurden-Attribut oder tag-Namen. Die Präferenz gewesen wäre, tag-name, aber die publishing-Plattform auf Sharepoint-Streifen aus unbekannt Elemente. Das bedeutet, dass wir gelassen wurden, mit der Verwendung von Attributen, um unsere Richtlinien für die Verlags-Seiten. Mit Winkel-2 obwohl, ich habe nur gesehen implementierten Komponenten, die von tag-Namen.

Ist es möglich, mit Winkel-2 zu verwenden, Attribut-Namen, um die Nutzung unserer Komponenten? Dies ist eine Voraussetzung für uns, weil die Einschränkungen in der Sharepoint-publishing-Plattform.

Dank.

InformationsquelleAutor der Frage TehOne | 2016-07-20

  1. 40

    Ja, die selector Eigenschaft des @Component decorator ist ein "CSS-Selektor (oder eine Teilmenge):

    selector: '.cool-button:not(a)'

    Gibt einen CSS-Selektor identifiziert diese Richtlinie innerhalb einer Vorlage.
    Unterstützte Selektoren gehören element, [attribute], .class, und :not().

    Tut nicht Unterstützung der Eltern-Kind-Beziehung-Selektoren.

    Quelle: Winkel-Cheat-Sheet /Richtlinie-Konfigurationdie @Component erbt.

    Diese Weise können Sie [name-of-the-attribute] (nämlich die CSS-Attribut-Selektor), wie:

    @Component({
    selector: "[other-attr]",
    ...
})
export class OtherAttrComponent {

    Se demo-plunker hier.

    Der übliche Weg ist die CSS-Typ (auch bekannt als element-oder tag -) Selektor:

    @Component({
    selector: "some-tag",
    ...
})

    Und es entspricht ein tag mit dem Namen some-tag.

    Können Sie sogar eine Komponente, die die Spiele sowohl ein tag oder ein Attribut:

    @Component({
    selector: "other-both,[other-both]",
    template: `this is other-both ({{ value }})`
})
export class OtherBothComponent {

    Demo-plunker enthält Beispiele für alle drei.

    Ist [attributeName="attributeValue"] unterstützt?

    Ja. Beachten Sie aber die Anführungszeichen. In der aktuellen Implementierung die Auswahl [attributeName="attributeValue"] tatsächlich entspricht <sometag attributeName='"attributeValue"'> so testen, um vor der Festlegung auf diesen Ansatz.

    InformationsquelleAutor der Antwort acdcjunior

  2. 7

    Ja, nach dieser https://angular.io/docs/ts/latest/guide/cheatsheet.html (Komponenten und Richtlinien sind sehr ähnlich, im Allgemeinen). Anstelle der Verwendung von element-Selektor:

    selector: 'custom-element-name'

    Verwenden:

    selector: '[custom-attribute-name]'

    Und in Ihrer übergeordneten Komponente der Vorlage:

    <div custom-attribute-name></div>

    InformationsquelleAutor der Antwort Harry Ninh

  3. 5

    Absolut. Im Grunde ist das nur ein CSS-Selektor, so dass, wenn Sie müssen, verwenden Sie Attribut, das Sie genau dies tun:

    @Component({
    selector: "my-tag[with-my-attribute]"
})

    InformationsquelleAutor der Antwort Alexander Leonov

  4. 3

    Selector-Eigenschaft @Component decorator-Unterstützung, element-Selektor Attribut-Selektor und Klassen-Selektor:

    1. Element-Selektor: 

    @Component({
 selector: 'custom-element-name'
})

    Verwendung: <app-servers></app-servers>

    2. Attribut-Selektor:

    @Component({
 selector: '[custom-element-name]'
})

    Verwendung: <div app-servers></div>

    3. Class-Selektor:

    @Component({
 selector: '.custom-element-name'
})

    Verwendung: <div class="app-servers"></div>

    Hinweis: Winkel-2 nicht unterstützt id-und pseudo-Selektoren

    InformationsquelleAutor der Antwort Ankit Chaurasia

Schreibe einen Kommentar