Ich habe eine untergeordnete Komponente erstellt, die eine Methode enthält, die ich aufrufen möchte.
Wenn ich diese Methode aufrufe, wird nur die console.log()
Zeile ausgelöst, die test
Eigenschaft wird nicht festgelegt ?
Unten ist die Schnellstart-Angular-App mit meinen Änderungen.
Elternteil
import { Component } from '@angular/core';
import { NotifyComponent } from './notify.component';
@Component({
selector: 'my-app',
template:
`
<button (click)="submit()">Call Child Component Method</button>
`
})
export class AppComponent {
private notify: NotifyComponent;
constructor() {
this.notify = new NotifyComponent();
}
submit(): void {
// execute child component method
notify.callMethod();
}
}
Kind
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'notify',
template: '<h3>Notify {{test}}</h3>'
})
export class NotifyComponent implements OnInit {
test:string;
constructor() { }
ngOnInit() { }
callMethod(): void {
console.log('successfully executed.');
this.test = 'Me';
}
}
Wie kann ich die test
Eigenschaft auch einstellen ?
angular
typescript
angular-components
Shammelburg
quelle
quelle
Antworten:
Sie können dies tun, indem Sie
@ViewChild
für weitere Informationen diesen Link überprüfenuntergeordnete Komponente
übergeordnete Komponente
untergeordnete Komponente
übergeordnete Komponente
quelle
Input
Eigenschaften: eine beobachtbare Eigenschaft, auf die das Kind reagiert, indem es seine eigene interne Funktion aufruft . Siehe die Antwort von user6779899Das hat bei mir funktioniert! Rufen Sie für Angular 2 die untergeordnete Komponentenmethode in der übergeordneten Komponente auf
Parent.component.ts
Child.component.ts
quelle
ChildComponent
mitChildVM
Ich denke, der einfachste Weg ist die Verwendung von Betreff. Im folgenden Beispielcode wird das Kind bei jedem Aufruf von 'tellChild' benachrichtigt.
Parent.component.ts
Parent.component.html
Child.component.ts
Arbeitsprobe auf Stackblitz
quelle
Winkel - Rufen Sie die Methode der untergeordneten Komponente in der Vorlage der übergeordneten Komponente auf
Sie haben ParentComponent und ChildComponent, die so aussehen.
Beim Servieren sieht es so aus:
Wenn sich der Benutzer auf das Eingabeelement von ParentComponent konzentriert, möchten Sie die doSomething () -Methode von ChildComponent aufrufen.
Mach das einfach:
quelle
@ViewChild('appChild', { static: false }) appChild: ElementRef<HTMLElement>;
und später zur Verwendungthis.appChild.doSomething()
Die Antwort von user6779899 ist ordentlich und allgemeiner. Auf der Grundlage der Anfrage von Imad El Hitti wird hier jedoch eine leichte Lösung vorgeschlagen. Dies kann verwendet werden, wenn eine untergeordnete Komponente nur mit einem übergeordneten Element eng verbunden ist.
Parent.component.ts
Parent.component.html
Child.component.ts
quelle
Betrachten Sie das folgende Beispiel:
Lesen Sie hier mehr über @ViewChild .
quelle
Ich hatte eine genaue Situation, in der die übergeordnete Komponente ein
Select
Element in einem Formular hatte, und beim Senden musste ich die Methode der entsprechenden untergeordneten Komponente gemäß dem ausgewählten Wert aus dem ausgewählten Element aufrufen.Parent.HTML:
Parent.TS:
Child.TS:
Hoffe das hilft.
quelle