提问人：Leonardo Rodrigues 提问时间：11/16/2023 更新时间：11/16/2023 访问量：10
如何创建一个 Angular 按钮，将您重定向到一个表单，其中一个输入将根据您单击的按钮填充文本？
How to create an Angular button that redirects you to a form where one of the inputs has will get filled with text based on the button you click on?
问：
我一直在尝试构建一个应用程序，其中目录组件具有将我重定向到表单组件的按钮，其中将根据单击的按钮进行输入。例如：textarea"Hello I would like to inquire about your {{product.name}}"
它们是兄弟姐妹组件，所以我尝试过这样做。我不知道这是否是最好的方法
服务.ts
import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';
@Injectable({
providedIn: 'root'
})
export class ContactTemplateService {
private productSource = new BehaviorSubject('default text')
currentProduct = this.productSource.asObservable();
constructor() { }
inquiryAboutProduct(name: string) {
this.productSource.next(name)
}
}
表单 HTML
<body class="bg-light mt-3">
<div class="container">
<div class="text-center">
<h3 class="text-primary">How Can We Help You?</h3>
<p class="lead mx-3">
Message us with your questions, we'll reply as soon as possible!
</p>
</div>
<form [formGroup]="contactForm" (ngSubmit)="onSubmit()">
<div class="d-flex align-items-center justify-content-center">
<div class="col-md-4">
<div class="p-4 rounded shadow-md">
<div class="form-group">
<label for="name" class="form-label">Your Name</label>
<input
type="text"
name="name"
class="form-control"
placeholder="Your Name"
formControlName="form_name"
/>
</div>
<div class="mt-3 form-group">
<label for="Email" class="form-label">Your Email</label>
<input
name="email"
class="form-control"
placeholder="Your Email"
formControlName="form_email"
/>
</div>
<div class="mt-3 form-group">
<label for="Subject" class="form-label">Subject</label>
<input
type="text"
name="subject"
class="form-control"
placeholder="Subject"
formControlName="subject"
maxlength="50"
/>
</div>
<div class="mt-3 mb-3 form-group">
<label for="Message" class="form-label">Message</label>
<textarea
name="message"
formControlName="message"
cols="20"
rows="5"
class="form-control"
placeholder="Hi, I would like to inquire about your..."
></textarea>
</div>
<button class="btn btn-primary" type="submit" [disabled]="!contactForm.valid">Send</button>
</div>
</div>
</div>
</form>
</div>
</body>
表单组件
import { Component, OnDestroy, OnInit, ViewChild } from '@angular/core';
import { FormBuilder, FormControl, FormGroup, Validators, ReactiveFormsModule } from '@angular/forms';
import { ContactUsService } from './contact-us.service';
import emailjs from '@emailjs/browser';
import { ContactTemplateService } from './contact-template.service';
import { Subscription } from 'rxjs';
@Component({
selector: 'app-contact-us',
templateUrl: './contact-us.component.html',
styleUrls: ['./contact-us.component.css']
})
export class ContactUsComponent implements OnInit {
productName!: string;
subscription!: Subscription
constructor(private fb: FormBuilder, private contact: ContactTemplateService) {}
ngOnInit(): void {
}
contactForm = this.fb.group({
form_name: ['', Validators.required],
form_email: ['', [Validators.required, Validators.email]],
subject: ['', Validators.required],
message: ['', Validators.required],
});
async onSubmit() {
emailjs.init('PApdcrgYVbBtHuMZe')
let response = await emailjs.send('service_wpv576e', 'template_pazz7u9', {
from_name: this.contactForm.value.form_name,
from_email: this.contactForm.value.form_email,
subject: this.contactForm.value.subject,
message: this.contactForm.value.message,
});
alert('Message has been sent')
this.contactForm.reset();
}
inquireProducts(){
this.subscription = this.contact.currentProduct.subscribe(productName => this.productName = productName)
}
}
目录HTML
<br>
<br>
<br>
<div class="container">
<h2 class="display-1 d-flex justify-content-center text-center">Tech Products/
Gadgets</h2>
<h3 class="display-6 d-flex justify-content-center px-5 text-center">Great option for a long-term gift with a lasting
impression. Each of these can be customised with
company logo in the packaging or the product.</h3>
</div>
<br>
<br>
<div class="container">
<div class="row g-5">
<ng-container *ngFor="let categoryArray of Productinfo">
<ng-container *ngFor="let product of categoryArray.Tech">
<div
class="d-flex justify-content-center col-xxl-3 col-xl-4 col-lg-6 col-12">
<div class="vstack gap-3">
<div
class="card card-cover h-100 overflow-hidden text-white bg-white rounded-5 shadow-lg"
>
<img src="{{ product.image }}" style="object-fit: cover" />
<div
class="d-flex flex-column ps-3 pe-5 fontName text-light text-shadow-1 h-100"
style="position: absolute"
>
<h2 id="productName"
class="pt-5 mt-5 mb-4 display-6 lh-1 fw-bold"
style="position: relative"
>
{{ product.name }}
</h2>
<img
src="../../../assets/images/bonjour-logo.png"
alt="Logo"
width="32"
height="32"
class="rounded-circle border border-dark bg-dark"
style="position: absolute; bottom: 15px"
/>
</div>
</div>
<button class="btn btn-dark" value="{{product.name}}" (click)="inquiryRedirect(product.name)" routerLink="/contact" >Inquire about {{product.name}}</button>
</div>
</div>
</ng-container>
</ng-container>
</div>
</div>
目录组件
import { Component, OnInit } from '@angular/core';
import { ContactTemplateService } from 'src/app/shared-components/contact-us/contact-template.service';
import { DataStorageService } from 'src/app/shared/data-storage.service';
import { Product } from 'src/app/shared/product-model';
@Component({
selector: 'app-catalogue-tech',
templateUrl: './catalogue-tech.component.html',
styleUrls: ['./catalogue-tech.component.css']
})
export class CatalogueTechComponent implements OnInit {
Productinfo: any = []
ProductValue!: string
constructor(private service: DataStorageService, private contact: ContactTemplateService ) {}
ngOnInit() {
this.service.GetProductDetails().subscribe(data => {
this.Productinfo = data;
})
}
inquiryRedirect(name: string) {
this.contact.inquiryAboutProduct(name)
}
}
答： 暂无答案
评论