将数据从子组件传递到父组件 Angular2(反应式和模板驱动组合)

Question

对 Angular 2(和一般的 Angular)非常陌生，我和我的同事遇到了一个情况，他决定采用模板驱动的方法，而我决定采用反应式驱动的方法。我们都创建了组件。他是一个搜索产品组件，而我的是一个可信卡组件。

它做什么和愿望

如果您从下拉框中选择信用卡，则从搜索框中呈现我的组件(并在插入数字时进行验证)。

我希望将我的信用卡组件(作为子组件)的数据绑定到他定义的SearchProductModel模型。 我在这里看到了类似的东西，有点类似于我的问题(将数据从子组件传递到父组件 Angular2)。

这些是组件和模板

信用卡.组件.ts

@Component({
selector:'creditcard',
templateUrl:'./app/creditcard/creditcard.component.html' 
})
export class CreditcardComponent {
creditForm: FormGroup 
ccnumber = new FormControl('', [Validators.required, validateCreditcard]);
constructor(fb:FormBuilder){
this.creditForm = fb.group({"ccnumber":this.ccnumber})
}

search-product.component.ts

@Component({
selector:'search-product',
templateUrl:'./app/search/search-product.component.html' 
})
export class SearchProductComponent{
products: Product[]
model = new SearchProductModel();
searchResult:string;
constructor(private searchProductService: SearchProductService){}
ngOnInit(): void {
this.searchProductService.getProducts().subscribe(products => this.products = products, error => console.log(error));
}
onSubmit(): void {
this.searchProductService.searchProduct(this.model).subscribe(result => this.searchResult = result, 
error => console.log(error));;
}

搜索产品组件.html

<form (ngSubmit)="onSubmit()" #searchForm="ngForm" autocomplete="off">
<p>
<md-select placeholder="Product (optioneel)" [(ngModel)]="model.productId" name="product-id" id="product" style="width:250px">
<md-option *ngFor="let product of products" [value]="product.Id">{{product.Name}}</md-option>
</md-select>
</p>
<div [ngSwitch]="model.productId">
<p *ngSwitchCase="1">
<creditcard></creditcard>
</p>
<p *ngSwitchDefault>
<md-input-container style="width: 250px">
<input mdInput [(ngModel)]="model.productNumber" name="product-number" id="product-number" required/>
<md-error>productnumber required</md-error>
</md-input-container>
<button md-button type="submit" id="btn-zoek">Search</button>
</form>

信用卡组件.html

<form [formGroup]="creditcardForm">
<div class="form-group">
<md-input-container>
<input mdInput formControlname="creditcardnumber" id="creditcardnumber" name="creditcardnumber"/>
<div *ngIf="creditForm.get('creditcardnumber').dirty && creditcardForm.get('creditcardnumber').hasError('validCreditcard')">Not correct creditcard</div>
</md-input-container>
</div>
</form>

据我了解，混合模板驱动和反应式方法是不可取的，因此我将在未来重构它。但是现在我想知道如何使我的信用卡输入进入他的model.productId(见代码)。 请耐心等待，我是新手，我只是很难理解它。

非常感谢帮助。

Answer 1

好吧，我犯了一个小错误，让我相信我的解决方案不起作用。 然而，它确实奏效了。我只是按照我在上面的链接中给出的解释进行操作。 在我的组件中添加了发射器，并将其他组件订阅到我的事件中。 这就成功了。