将数据从子组件传递到父组件 Angular2（反应式和模板驱动相结合）

Question

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

有什么作用和愿望

如果您 select 来自下拉框中的信用卡，我的组件将在搜索框中呈现（并在插入数字时进行验证）。

我希望将我的信用卡组件（作为子组件）的数据绑定到他定义的 SearchProductModel 模型。我看到了一些类似的东西，有点像我的问题，这里是 post ()。

这些是组件和模板

creditcard.component.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})
}

搜索-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));;
}

搜索-product.component.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>

creditcard.component.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

好的，我犯了一个小错误，导致我相信我的解决方案不起作用。但是它确实起作用了。我只是按照上面 link 中的解释进行操作。在我的组件中添加了发射器，并为另一个组件订阅了我的事件。成功了。

将数据从子组件传递到父组件 Angular2（反应式和模板驱动相结合）

Pass data from child to parent component Angular2 (reactive and template driven combined)

angular

typescript

angularjs-directive

angularjs-scope

components