сбрасывать все входы на угловой 2 родительский и дочерний компонент

Question

Я новичок в Angular 2. Изучив Angular 2, я сделал демо-приложение для использования родительского и дочернего компонентов. Представление родительского компонента имеет элемент формы, а несколько входов и представление дочернего компонента имеют другие входные данные. Это мой вид родительского компонента

<form #f="ngForm" (ngSubmit)="onSubmit(f)"><div class="field clearfix w50" > 
        <label>Destination <span class="note">*</span></label> 
        <div [class.has-error]="is_draft_validated && !destination.value"> 
         <input type="text" name="destination" [(ngModel)]="TRequest.destination" #destination="ngModel" class="form-control"> 
         <span *ngIf="is_draft_validated && !destination.value" class="error">{{ 'VALIDATE.required' | translate }}</span> 
        </div> 
       </div><payment-dietary *ngIf="TRequest.m_menu_request_id==9" [clear]="is_clear" [dietary]="TRequestDietary"></payment-dietary><button class="btn btn-style btn-style-special btn-chart" type="submit"> 
         <i class="fa fa-bar-chart"></i>&nbsp;Save 
        </button> 
        <button class="btn btn-style btn-clear" (click)="onClear(f)"> 
         <i class="fa fa-eraser"></i>&nbsp;Reset 
        </button></form> 

И мой взгляд ребенка компонента

<div class="field clearfix w100"> 
     <label>Participant Name <span class="note">*</span></label> 
     <div> 
      <input type="text" name="participant_name" class="form-control" [(ngModel)]="Item.participant_name" #participant_name="ngModel" [class.ng-invalid]="participant_name?.dirty && !participant_name.value"> 
      <span *ngIf="participant_name?.dirty && !participant_name.value" class="error">{{ 'VALIDATE.required' | translate }}</span> 
     </div> 
    </div> 
    <div class="field clearfix w50"> 
     <label>Participant Number <span class="note">*</span></label> 
     <div> 
      <input type="text" name="participant_num" class="form-control numeric" [(ngModel)]="Item.participant_num" (keyup)="Item.participant_num = $event.target.value" #participant_num="ngModel" [class.ng-invalid]="(participant_num?.dirty || participant_num?.touched) && !participant_num.value && !clear" id="form_participant_num"> 
      <span *ngIf="(participant_num?.dirty || participant_num?.touched) && !participant_num.value" class="error">{{ 'VALIDATE.required' | translate }}</span> 
     </div> 
    </div> 

И нижестоящего компонента кода

import { Component, Input, AfterViewInit } from '@angular/core'; 
import { TRequestDietary } from '../../../../models'; 

@Component({ 
    selector: 'payment-dietary', 
    templateUrl: './payment-dietary-form.component.html', 
}) 

export class PaymentDietaryFormComponent{ 
    @Input('dietary') Item: TRequestDietary; 
    @Input() clear: boolean; 
} 

При нажатии кнопки сброса формы, я могу только сбросить ввод в представлении родителя, но не может сбрасывать входные данные при просмотре дочернего компонента. Это форма сбрасывания кода

onClear(form: NgForm){ 
form.reset(); 
} 

Я не знаю, как сбросить входы на дочерний компонент. Пожалуйста, помогите мне

Answer 1

У вас есть «четкое» логическое значение, отправленное дочернему компоненту. Вы можете использовать this

Изменение родительского компонента:

onClear(form: NgForm){ 
this.is_clear=true; 
form.reset(); 
} 

При переключении isClear компонента ребенка в родительской функции. Это устанавливается в родительском шаблоне.

и в детском компоненте,

ngOnChanges(changes: {[propKey: string]: SimpleChange}) { 
for (let propName in changes) { 
if(propName==clear){ 
    //check for false to true and reset 
} 
} 
} 

ngOnChanges lifecyclehook вызывается при обнаружении изменений в компоненте. Здесь вы можете обнаружить изменение переменной isClear от ложного значения до значения true и сбросить форму в дочернем элементе.

Answer 2

Если вы используете комбинацию child-parent, используйте в качестве родителя класс «TRequest». как

В родительском классе определяет

public TRequest : TREQUEST; 

И создать класс типа TREQUEST

class TREQUEST{ 
public Prop1:string =""; 
public Prop2:number =null; 
} 

использовать его в шаблонах, а также в ребенке. Когда нужно сбросить

this.TRequest = new TREQUEST(); 

Этот новый сбросит свою модель путем создания новых экземпляров.