[英]How can I pass data on button click from one component to another using Angular 8?
I'm trying to pass the data from one component to another and I'd like it to happen on the button click.我正在尝试将数据从一个组件传递到另一个组件,我希望它发生在单击按钮时。 Not sure how to set this up.不知道如何设置。 I've marked my properties with @Output() and @Input() and set up the passing using the app properties setup, but would like this to happen when the button is clicked.我已经用 @Output() 和 @Input() 标记了我的属性,并使用应用程序属性设置设置了传递,但希望在单击按钮时发生这种情况。
In my question.component.html, this is the button I have created:在我的 question.component.html 中,这是我创建的按钮:
<div class="viewResultsNav" *ngIf="question && question.questionId ===
totalQuestions">
<button type="button" (click)="navigateToResults();">
View Your Results
</button>
</div>
and I have a template where I'm passing to app-results:我有一个要传递给应用程序结果的模板:
<ng-template #quiz_results>
<app-results
[allQuestions]="allQuestions"
[totalQuestions]="totalQuestions"
[totalQuestionsAttempted]="totalQuestionsAttempted"
[correctAnswers]="correctAnswers"
[progressValue]="progressValue"
[percentage]="percentage">
</app-results>
</ng-template>
In the child component, all these properties are marked with @Input(), so I'd like these properties to get passed via the button into the component.在子组件中,所有这些属性都用@Input() 标记,所以我希望这些属性通过按钮传递到组件中。 Right now if I click the button it's navigating to ResultsComponent but it doesn't pass any data.现在,如果我单击按钮,它会导航到 ResultsComponent,但它不会传递任何数据。 Is it possible to pass data along with the router or can the ng-template quiz_results be served from the button?是否可以与路由器一起传递数据,或者是否可以通过按钮提供 ng-template quiz_results?
Try something like this:尝试这样的事情:
app-parent.ts:应用程序父.ts:
receivedChildMessage: string;
getMessage(message: string) {
this.receivedChildMessage = message;
}
app-parent.html app-parent.html
<app-child (messageToEmit)="getMessage($event)"></app-child>
app-child.ts:应用程序-child.ts:
@Output() messageToEmit = new EventEmitter<string>();
sendMessageToParent(message: string) {
this.messageToEmit.emit(message)
}
app-child.html: app-child.html:
<button (click)="sendMessageToParent(messageToSendC)">Send to Parent</button>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.