Ich versuche, eine Variable aus einer übergeordneten Komponente in untergeordneten Komponenten zu verwenden und sie über die Methode einer anderen Variablen festzulegen.
Allerdings kann ich es nicht verwenden. Kann mir bitte jemand bei der Umsetzung helfen.
Übergeordnete Komponente
@Component({
...,
template: `<child [var1]="var1" [var2]="var2"><child>`
})
export class ParentComponent implements onInit {
var1: any;
var2: any;
ngOnInit(): void {
this.dataService.subscribe(data => {
this.var1.push(data);
});
}
}
Untergeordnete Komponente
@Component({
selector: 'child',
...
})
export class childComponent implements OnInit{
@Input() var1:any;
private var2Value: any;
@Input() get var2(): any {
return this.var2Value;
}
set var2(val){
console.log(var1); // it shows undefined in the console.
}
ngOnInit(): void {
console.log(var1);
}
}
Wenn ich es in der set-Methode einer anderen Variablen in der untergeordneten Komponente verwende, wird in der Konsole undefiniert angezeigt. Aber wenn ich es in der ngOnInit-Methode in der untergeordneten Komponente verwende, werden die Daten in der Konsole angezeigt.
Ich würde mit der Typisierung Ihrer Komponenten beginnen. Typescript existiert, weil wir der Meinung sind, dass Typisierung die Entwicklung unterstützt. Sie sollten es hier so anwenden, dass Sie Folgendes erhalten:
In der übergeordneten Komponente:
var1: any[];
var2: any[];
In der untergeordneten Komponente:
@Input() var1: any[];
Als nächstes gibt es einen Fehler in Ihrem Code, der besagt, dass var1die übergeordnete Komponente nicht initialisiert wird. Aus diesem Grund können Sie nicht darauf drängen. Daher würde ich aktualisieren hat:
var1: any[] = [];
var2: any[];
Im Anschluss daran würde ich Ihre dataService.
Es sei denn, Ihr Dienst erstreckt sich von Subscriptionoder ähnlich, Sie können abonnieren nicht direkt aufrufen, daher würde ich überprüfen, ob Sie die richtige Eigenschaft aufrufen, da das Folgende seltsam erscheint:
this.dataService.subscribe(data => {
...
});
Als letztes würde ich prüfen, was für eine Art Subjectdieses Observable ist ( dataService.subscrive). Ich habe Ihren Code mit a ausprobiert setIntervalund es gelingt mir, die Werte in beiden zu erhalten.
Ich würde auch raten, dass Folgendes nicht gleich ist:
<child [var2]="var2" [var1]="var1"></child><child [var1]="var1" [var2]="var2"></child>Die 1º übergibt den Wert var2vor dem var1eingestellt wird. Die 2º übergibt den Wert, var2nachdem var1eingestellt wurde. Dies liegt daran, dass Angular die Eingaben gemäß der im HTML-Code angegebenen Reihenfolge übergibt. Wenn Sie also den HTML-Code wie im ersten Fall schreiben, var1wird in der setvon undefiniert, var2aber in der ngOnInit().
Dieser Artikel stammt aus dem Internet. Bitte geben Sie beim Nachdruck die Quelle an.
Bei Verstößen wenden Sie sich bitte [email protected] Löschen.
Lass mich ein paar Worte sagen