Boolean Eingänge zu Winkel 2 Komponente

Question

Ich versuche, eine Komponente zu schreiben, die in meiner Anwendung wiederverwendet werden soll, die manchmal eine Steuerschaltfläche zeigt und manchmal nicht.

Idealerweise würde ich dies von der Anwesenheit oder Abwesenheit eines Attributs erhalten, so dass die Verwendung der Komponente etwa wie <generic-component hideControls></generic-component> aussehen würde, mit einer booleschen Variable in meiner Komponente, basierend darauf, ob dieses Attribut vorhanden ist, aber ich kann keinen Weg sehen, dies zu tun.

Gibt es eine Möglichkeit, dies zu tun?

Ich habe versucht, mit der etwas chaotischeren Version unten (obwohl idealerweise würde ich keinen Wert auf showControls/hideControls setzen);

generic.component.html

<div> 
    <div>Stuff</div> 
    <div *ngIf="showControls">Controls</div> 
</div> 

generic.component.ts

// imports etc. 
@Component({ 
    selector: 'generic-selector', 
    templateUrl: 'generic.component.html' 
}) 
export class GenericComponent implements OnInit { 
    @Input() 
    public showControls: boolean = true; 

    // other inputs and logic 
} 

Dies schlägt fehl, weil die Nutzung <generic-selector showControls="false"></generic-selector> Sätze showcontrols als die Zeichenfolge "false", die truthy, anstatt als boolescher Wert. Also muss ich es umgehen, indem ich der Komponente eine Menge Chaos hinzufüge, um die Eingabe aufzunehmen und in einen booleschen Wert zu konvertieren, basierend darauf, ob die Zeichenfolge "falsch" erhalten wird oder nicht. Eine unordentliche Art, dies zu sortieren, wäre wünschenswert, aber ich würde es vorziehen, die andere Option oben zu tun.

Answer 1

Dies schlägt fehl, weil die Nutzung <generic-selector showControls="false"></generic-selector> Sätze showcontrols als Zeichenfolge „false“, die truthy ist und nicht als den Booleschen Wert. So Ich muss es umgehen, indem Sie eine Menge Unordnung an die Komponente hinzufügen nehmen Sie die Eingabe und konvertieren zu einem booleschen basierend darauf, ob es gegeben ist die Zeichenfolge "falsch" oder nicht. Eine nicht-chaotische Art, diese zu sortieren, würde geschätzt werden, aber ich würde bevorzugen, in der Lage zu sein, die andere Option oben zu tun.

mit Bindung

<generic-selector [showControls]="false"></generic-selector> 

Answer 2

In Angular gibt es zwei Möglichkeiten, um einen Wert, um Ihr Eigentum zu vergeben:

1. mit als HTML-Attribute
2. mit eckigen Klammern

Im ersten Fall ist der Wert Ihres Eigenschaft ist immer eine Zeichenkette, wie jedes HTML-Attribut, auch wenn Sie eine interpolierbare Zeichenkette wie folgt zuweisen: {{true}}.

Während im zweiten Fall wird es als JavaScript-Ausdruck interpretiert, aber in Ihrem Kontext. Wenn Sie also eine Objektnotation haben, wird der Wert Ihres Attributs als Objekt geparst. Aber für die Angabe des Kontextwinkels wird keine "mit" -Anweisung verwendet, daher können Sie dort nicht Ihre Globals verwenden, sondern nur die Eigenschaften der Komponente, in deren Bereich Ihre Komponente eingefügt wird.

<generic-selector [showControls]="false"></generic-selector>

In diesem Fall nimmt die Zeichenfolge "false" und übersetzt sie in JavaScript. Also in JavaScript, es ist ein Boolescher, dann erhalten Sie es als boolean.

Aber wenn Sie etwas davon haben werden: <generic-selector [showControls]="{myProp: 'val'}"></generic-selector>

dann die Art Ihrer showcontrols wird object sein und sein Wert wird MyProp Eigenschaft gleich ‚val‘ haben.

aber wenn Sie etwas nonliteral haben dort dann wird es in Betracht gezogen wird eine Eigenschaft Ihrer Klasse sein:

<generic-selector [showControls]="location"></generic-selector>

dann, wenn Sie eine Standort-Eigenschaft auf dem Umfang der haben werden Komponente, die Ihre generic-selector enthält, dann wird der Wert der Eigenschaft location übernommen, andernfalls ist sie undefiniert.

Ich empfehle Ihnen, mit ngOnInit den Typ der Eigenschaft und den zugewiesenen Wert zu protokollieren.

Answer 3

Sie können die Input Dekorateur, wie Sie normalerweise mit anderen Attributen tun würde. Der einzige Trick besteht darin, dass der Wert undefined wäre, wenn das Attribut nicht vorhanden ist, andernfalls wäre der Wert eine leere Zeichenfolge.

Logic:

import { Component, OnInit } from '@angular/core'; 

@Component({ 
    selector: '', 
    templateUrl: './boolean-component.component.html' 
}) 
export class AppBooleanComponent implements OnInit { 

    @Input('boolean-attribute') booleanAttr: boolean; 

    ngOnInit() { 
    this.booleanAttr = this.booleanAttr !== undefined; 
    console.log(`Boolean attribute is ${this.booleanAttr ? '' : 'non-'}present!`); 
    } 

} 

Template 1 (logs 'Boolean Attribut vorhanden ist!'):

<app-boolean-component boolean-attribute></app-boolean-component> 

Template 2 (logs 'Boolean Attribut ist nicht vorhanden!'):

<app-boolean-component></app-boolean-component>