Question

对于Angular 2（以及一般的Angular）来说是一个新手，我遇到了一个与我的同事的情况，他决定采用模板驱动的方法和我的反应驱动方法。我们都创建了组件。他是一个搜索产品组件，我的是一个信用卡组件。

它的作用和愿望

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

我希望将来自我的信用卡组件（作为孩子）的数据绑定到他定义的SearchProductModel的模型。我看到一些类似于我的问题的东西，这里有帖子（Pass data from child to parent component Angular2）。

这些是组件和模板

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})
}

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

搜索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

好的，我犯了一个小错误，让我相信我的解决方案不起作用。但它确实有效。我只是按照上面链接中的解释。在我的组件中添加了Emitter，并将其他组件订阅到我的事件中。这就是诀窍。

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

1 个答案: