Wiederverwendung von Komponenten in den Winkel-2

Als ich anfing mit Winkel-2 hatte ich die Idee, dass der Hauptgrund für die Komponenten erstellen, da ist kannst du wiederverwenden. EG:

<custom-button id="button1">button 1</custom-button>
<custom-button id="button2">button 2</custom-button>

Ist es der Fall, dass dies ein großer Grund zu gehen, mit Winkel-2 und-Komponenten in eine web-app, und es kann getan werden?

Habe ich nicht gefunden eine Ressource, die gezielt beantwortet meine Frage, wie dies zu tun.

Ich würde gerne eine Schaltfläche erstellen, und einen Eingang, die 2 die grundlegenden und am häufigsten verwendeten html-Elemente und machen Sie wiederverwendbar.

Ich habe versucht, eine button-Komponente und wiederverwenden.

Ich habe versucht, es in ein html-template wie dieses:

<custom-button>some text</custom-button>
<custom-button>different text</custom-button>

Aber der text nicht zeigen, bis auf den button. Kann das getan werden?

Andere Sache, die ich überlege ist eindeutige html-id ' s, wenn dies zu tun. Bin ich in der Lage, fügen Sie eine eindeutige html-id-Attribut für jede Instanz?

Vielleicht wie:

<custom-button id="display-bikes">bikes</custom-button>
<custom-button id="display-helmets">helmets</custom-button>

Und dann kann ich einige spezielle css-mithilfe der eindeutigen id des Elements?

Dass alles, was ich wissen will, und wie es zu tun.

Aber hier ist der rest von meinem code eingebunden:

Komponente:

import { Component } from '@angular/core';
@Component({
    selector: 'custom-button',
    templateUrl: 'app/shared/button.component.html',
    styleUrls: ['app/shared/button.component.css']
})
export class ButtonComponent { }

css:

button {
  font: 200 14px 'Helvetica Neue' , Helvetica , Arial , sans-serif;
  border-radius: 6px;
  height: 60px;
  width: 280px;
  text-decoration: none;
  background-color: $accent;
  padding: 12px;
  color: #FFF;
  cursor: pointer;
}

button:focus {
    outline:0 !important;
}

html:

<button md-raised-button type="button" class="btn text-uppercase flex-sm-middle">
try now <!-----lets get rid of this and let the client decide what text to display somehow???
</button>

InformationsquelleAutor BeniaminoBaggins | 2016-08-26

  1. 6

    Können Sie erreichen dies, indem Sie @Input Dekorateur. Lesen Sie mehr über es hier. Erste, in Ihrem ButtonComponent fügen Sie eine variable, die display-Taste name, so wie hier:

    export class ButtonComponent {

    @Input() buttonName: string;

}

    Hinweis: Sie importieren müssen Input decorator: import { Input } from '@angular/core';

    Dann in html zwei-Wege-Datenbindung (interpolation) display-Taste Wert:

    <button md-raised-button type="button" class="btn text-uppercase flex-sm-middle">
    {{buttonName}}
</button>

    Und, schließlich, wenn Sie wollen, um die display-Taste der Komponente, die Sie geben können Taste ein name mit einem einfachen Attribut-Wert:

    <custom-button buttonName="First Button"></custom-button>
<custom-button buttonName="Second Button"></custom-button>
<custom-button buttonName="Third Button"></custom-button>

    Ich habe versucht, diese so einfach wie möglich, fühlen Sie sich frei, Fragen zu stellen, wenn Sie auf irgendwelche Probleme stoßen.

    InformationsquelleAutor Stefan Svrkota

  2. 15

    "Kann das getan werden?"

    Ja! Es heißt transklusion oder Inhalt Projektion und Sie können Lesen Sie darüber ausführlich hier.

    Hier ist, wie:

    In button.component.html:

    <button>
    <ng-content></ng-content>
</button>

    Dann, wenn Sie Inhalte innerhalb der tags für die Komponente, wie diese: <custom-button id="display-bikes">bikes</custom-button>, den Winkel-2 compiler 'Projekt' in der Komponente template dazwischen die ng-content - tags. So sind letztlich, Sie würden sich diese zur Laufzeit:

    <button>
    bikes
</button>

    Das ist nur ein einfaches Beispiel. Sie können wirklich fortgeschrittene mit es und Dinge tun, wie anderen Projekt-Komponenten und mehrere <ng-content> outlets. Lesen Sie darüber im oben verlinkten blog.

    Und dann kann ich einige spezielle css-mithilfe der eindeutigen id des Elements?

    Auch, ja... aber Sie würden nicht mit der standard-id-Attribut.

    Auf Ihre ButtonComponent:

    import { Component, Input } from '@angular/core';
@Component({
  selector: 'custom-button',
  templateUrl: 'app/shared/button.component.html',
  styleUrls: ['app/shared/button.component.css']
})
export class ButtonComponent {
  @Input() styleId: string;

  //...
}

    Sagen, dass-Taste.Komponente.css zwei Klassen namens class-one und class-two.

    In button.component.html: 

    <button [ngClass]="{class-one: styleId === 'applyClassOne', class-two: styleId === 'applyClasstwo'}">
    <ng-content></ng-content>
</button>

    Dann binden Sie die Input-Eigenschaft in der übergeordneten wie so:

    <custom-button [styleId]="'applyClassOne'"></custom-button>
<custom-button [styleId]="'applyClassTwo'"></custom-button>

    Gibt es andere Möglichkeiten, die Anwendung von Stilen dynamisch, aber dieses ist das einfachste, da gibt es nur zwei Klassen zur Auswahl.

    Danke!! Definitiv fallen alle meine Fragen mit klaren arbeiten, Antworten.

    InformationsquelleAutor ABabin

  3. 2

    Sollten Sie wirklich nicht die Mühe zu schreiben, dass bestimmte CSS-hängt von der ID der Komponente, ist dies nicht notwendig.

    Jede Komponente gekapselt ist (standardmäßig). Die Verkapselung verwendet das Shadow DOM, oder eine emulation (Standard).
    Für jede Komponente können Sie wählen Sie eine der 3 encapsulation Modi:

    • ViewEncapsulation.Keine: es wird keine Stil Kapselung
    • ViewEncapsulation.Emuliert -- die Standardeinstellung verwendet, die Attribute zu "Kapseln" der Stil
    • ViewEncapsulation.Native -- Nutzt Shadow DOM

    Hier ist ein guter blog-Beitrag zu diesem Thema: http://blog.thoughtram.io/angular/2015/06/29/shadow-dom-strategies-in-angular2.html

    Danke. Hat diese Kapselung bedeutet, dass wenn Sie tun <h1 id="heading">abc</h1> irgendwo in der Komponente html-Vorlage, dass der Umfang, die id ist die Komponente, so können Sie Elemente in verschiedene Komponenten mit der gleichen id?
    Angenommen, Sie sind in der Standard - /emuliert Fall, und Ihre Komponente Stil gekapselt ist mit einem Attribut: [_ngcontent-1] Jetzt, alle Ihre Komponenten-CSS-Regel wird automatisch mit einer [_ngcontent-1] an der oberen Wurzel des Selektors. Der einfachste Weg zu verstehen ist, untersuchen Sie die Stile, die von einer Eckigen 2-Komponente zur Laufzeit mit den Entwickler-tools. Ich denke, Sie sollten wirklich halten, Ihre IDs-einzigartig in der Anwendung, Sie brauchen Sie nicht in einer Komponente.

    InformationsquelleAutor KnightB4

Schreibe einen Kommentar