Kann eine Komponente ihre eigene Vorlage entfernen und bedingt zurückstellen? - eckig

Mit Blick auf die *ngIf"s Quellcode:

@Input()
set ngIf(condition: any) {
if (condition && !this._hasView) {
this._hasView = true;
this._viewContainer.createEmbeddedView(this._template);
} else if (!condition && this._hasView) {
this._hasView = false;
this._viewContainer.clear();
}
}

Kann ich eine Komponente haben, die Folgendes bietet:

@Component({})
class MyComponent{

constructor (
public _template : TemplateRef,
public _viewContainer : ViewContainerRef) {
}

onSomeButtonClick(condition){
if(condition){
removeMyView();
}else{
putTheViewBackIfItsRemoved();
}
}
}

Versuchen zu verwenden ngIf"s Logik in der Komponente funktioniert nicht, was ich denke, weil die ViewContainerRef für die Komponente ist leer

EDIT:

Nur um zu erwähnen, dass ich nicht versuche, die Ansicht zu verstecken, möchte ich sie aus DOM entfernen.

Mit anderen Worten, können wir etwas wie ngIf von Host-Elementen? Ich weiß, dass du keine Direktive auf den Host setzen kannst, deshalb dachte ich, dass du vielleicht mit ViewContainer und TemplateRef dasselbe erreichen kannst.

Die andere Sache ist, mit Angular gearbeitet zu habenund das Erstellen dynamischer Komponenten ist die einzige Möglichkeit, ViewContainerRef zu verwenden, um eine neue Komponente in DOM zu erstellen, aber meine wichtige Frage ist, erstellt Angular selbst Komponenten auf die gleiche Weise?

Wenn ja, können wir irgendwie auf den Container zugreifen, der die Komponenten enthält?

Für diejenigen, die gerade begonnen haben, Angular zu lernen und hier hilfreich zu sein (danke dafür), sollte ich sagen, dass ich aufrichtig weiß, wie man ngIf in meiner Vorlage verwendet:

Ich jetzt, was ein ngIf ist und was es tut:

aber :

 <div *ngIf="condition"></div>

ist nicht was ich meine, einfach weil das potentiell das entfernen wird, was in meiner Vorlage ist, und ich muss alles in dieses div einpacken, damit es funktioniert, was ich nicht will.

Ich möchte die Vorlage alle zusammen mit ngIfing das Innere löschen.

---

AKTUALISIEREN:

Um eine Klarstellung zu geben:

Mit anderen Worten, es ist wie ein ngIf auf dem Host:

@Component({

host:{
"*ngIf":"shouldBeRemoved"
}
})
class MyComponent{

Ich weiß, dass du ngIf nicht auf den Host setzen kannst, weil seine Direktive und der Host nur statische Werte kompiliert, deshalb frage ich, ob es einen Weg gibt, damit umzugehen viewContainerRef oder so .

Bitte verwirren Sie sich, indem Sie ngIf in die Vorlage einfügen, das ist nicht das, was ich will.

Vielen Dank für Ihre Geduld.

Antworten:

4 für die Antwort № 1

Es gibt keine offizielle Möglichkeit, eine Vorlage aus einer Komponente zu entfernen. Für mich ist das sinnvoll. Wenn Sie Ihre Vorlage entfernen, wird sie sich darum kümmern, sie zurückzustellen. Das funktioniert in ngIf weil ngIf erstellt zuerst ein template hinter der Szene und bettet dann das Element ein, so dass es einen Verweis auf das eingebettete Element hat, daher kann es es löschen oder zurückstellen.

---

5 für die Antwort № 2

Hier ist was du suchst:

@Component({
selector: "your-selector",
template: "<template [ngIf]="showView"> Here is my component template </template> ",
})
class MyComponent{

showView: boolean = true;

onSomeButtonClick(condition){
if (condition) {
this.showView = false;
} else {
this.showView = true;
}
}
}

Fügen Sie nun einfach eine Schaltfläche mit einem OnClick-Callback hinzu, um anzurufen onSomeButtonClick mit etwas param und du bist fertig

---

1 für die Antwort № 3

Ich kann nur auf mein begrenztes Verständnis der Funktionsweise von angular2 und typescript antworten.

Kurze Antwort

Nein.

Lange Antwort

Auf der Typoskriptebene sehen die Vorlage und die Klasse wie ein separater Teil aus. Die Vorlage ist jedoch tatsächlich Teil der Klassendeklaration.

Sobald eine Komponentenklasse initiiert wird, werden alle diese Vorlagenvariablenbindung, Direktive usw. zu kleinen Teilen innerhalb des Komponentenobjekts.

Ändern, einschließlich Entfernen (was die Frage verlangt), bedeutet das Template im Grunde, die Klasse neu zu schreiben, muss erneut transkribiert werden, dann neu kompilieren / reinit durch die angular2-Engine.

Aus programmtechnischer Sicht ist dies möglich,vor allem mit JavaScript-Objekten, die alle Geschwister löschen können und alles neu initiieren können. Allerdings sehe ich keine eckige2 Möglichkeit für eine Komponente neu starten selbst.

Derzeit ist die engste Technik, die ich kenne, eine dynamische Komponente, von der die Elternkomponente erstellen und zerstören kann. Und es wird in der Frage erwähnt.

(Neustart eine Komponente ist fast identisch mit einer dynamischen Komponente, Differenz wird intern oder extern ausgelöst.)

---