将唯一标识符传递给angular 2组件？

Question

I am facing an issue in Angular2. I want to pass unique identifier to my reusable component. Can someone help me.

account.html

<div class="container">
      <!-- ACCOUNT INFO -->
      <div class="row">
        <!-- ACCOUNT FORM -->
        <div class="col-sm-12">
          <div class="row">
            <div class="col-sm-4">
              <p>Name</p>
            </div>
            <div class="col-sm-6">
              <ar-account-editable-string [type]="'text'" [name]="'name'" [placeholder]="'Enter the name'"
                [text]="user?.username" (changed)="user.lastName = $event">
              </ar-account-editable-string>
            </div>
            <div class="col-sm-2 action-type">
              <div *ngIf="user.lastName">
                <a href (click)="enableAction()">Edit</a>
              </div>
              <div *ngIf="!user.lastName">
                <a href (click)="enableAction()">Add</a>
              </div>
            </div>
            <div class="col-sm-12">
              <ar-toggleable-account-section [inactive]="inactive" (activated)="$event">
              </ar-toggleable-account-section>
            </div>
          </div>
          <div class="row">
            <div class="col-sm-4">
              <p>Password</p>
            </div>
            <div class="col-sm-6">
              <div *ngIf="oldPassword">
                <ar-account-editable-string [type]="'password'" [name]="'oldPassword'" [placeholder]="'Current Password'" [text]="oldPassword" (changed)="oldPassword = $event">
                </ar-account-editable-string>
              </div>
              <div *ngIf="newPassword">
                <ar-account-editable-string [type]="'password'" [name]="'newPassword'" [placeholder]="'New Password'" (changed)="newPassword = $event">
                </ar-account-editable-string>
                <ar-account-editable-string [type]="'password'" [name]="'repeatNewPassword'" [placeholder]="'Repeat New Password'" (changed)="newPassword = $event">
                </ar-account-editable-string>
              </div>
            </div>
            <div class="col-sm-2 action-type">
              <div *ngIf="user.password">
                <a href (click)="enableAction()">Edit</a>
              </div>
              <div *ngIf="!user.password">
                <a href (click)="enableAction()">Add</a>
              </div>
            </div>
            <div class="col-sm-12">
              <ar-toggleable-account-section [inactive]="inactive" (activated)="$event">
              </ar-toggleable-account-section>
            </div>
          </div>

In above html ar-toggleable-account-section is inactive. It will become active when user either clicks 'Edit' or 'Add' button.

account.component.ts

protected inactive: boolean = true;
protected enableAction():boolean {
    this.inactive = false;
    return false;
  }

toggleable-account.component.html

<div class="col-sm-offset-4" *ngIf="!inactive">
  <a href (click)="save()">Save</a>
  <a href (click)="cancel()">Cancel</a>
</div>

toggleable-account.component.ts

import {
  Component, Input, Output, ViewChild, ViewEncapsulation, EventEmitter
} from '@angular/core';

@Component({
  selector: 'ar-toggleable-account-section',
  templateUrl: './toggleable-account.component.html',
  encapsulation: ViewEncapsulation.None
})
export class ToggleableAccountButtonComponent {

  /**
   * set the inactive state of the component
   * @type {boolean}
   */
  @Input() inactive:boolean = true;

  @Output() action = new EventEmitter<string>();

  protected save():void {
    this.action.emit('save');
  }

  protected cancel():void {
    this.action.emit('cancel');
  }

}

editable-account-string.component.html:

<input type="{{type}}"
        placeholder="{{placeholder}}"
        value="{{text}}" 
        [readonly]="text ? 'true': null" />

editable-account-string.component.ts:

import {
  Component, Input, Output, ViewEncapsulation, EventEmitter
} from '@angular/core';

@Component({
  selector: 'ar-account-editable-string',
  templateUrl: './editable-account-string.component.html',
  encapsulation: ViewEncapsulation.None,
})
export class EditableAccountStringComponent {
  @Input() type:string = 'text';
  @Input() placeholder:string = 'Enter some text...';
  @Input() name:string = '';
  @Input() text:string = '';

  @Output() changed = new EventEmitter<string>();


}

Issue:

Initially 'ar-toggleable-account-section' is inactive/hide. When I click 'Edit' or 'Add' button it becomes active but shows me multiple 'Save' 'Cancel' on the screen because same [inactive] is used in multiple places that are 'lastName', 'password' etc. So, when one [inactive]="inactive" become false all will show on the screen. How can we pass unique/dynamic [inactive] value to the component for each user.lastName, user.password, user.email etc.?

Can someone give me a solution for this?

Answer 1

You could try this, pass what you Adding/Editing to the enable function and then in the components' input test whether that adding/editing property matches what you are adding/editing

account.component.ts

protected addEditProp = '';
protected enableAction(prop: String) {
    this.addEditProp = prop;
}
protected finishedAddEdit(result: String) {
    this.addEditProp = '';
}

toggleable-account-component.ts (just a variable name change)

@Output() accountResult = new EventEmitter<string>();

account.html (Notice the accountResult in the <ar-toggleable-account-section> )

<div class="col-sm-2 action-type">
    <div *ngIf="user.lastName">
        <a href (click)="enableAction('lastName')">Edit</a>
    </div>
    <div *ngIf="!user.lastName">
        <a href (click)="enableAction('lastName')">Add</a>
    </div>
</div>
<div class="col-md-12>
    <ar-toggleable-account-section [inactive]="addEditProp === 'lastName'" (accountResult)="finishedAddEdit($event)">
    </ar-toggleable-account-section>
</div>
<div class="col-sm-2 action-type">
    <div *ngIf="user.password">
        <a href (click)="enableAction('password')">Edit</a>
    </div>
    <div *ngIf="!user.password">
        <a href (click)="enableAction('password')">Add</a>
    </div>
</div>
<div class="col-sm-12">
    <ar-toggleable-account-section [inactive]="addEditProp === 'password'" (accountResult)="finishedAddEdit($event)">
    </ar-toggleable-account-section>
</div>

You will have to make sure that when you are done adding/editing and emit save or cancel to the parent component, it looks like the finishedAddEdit(result: String) function, you reset the addEditProp.

addEditProp = '';

[UPDATE] (To Show input if user is editing the lastName/password ect.)

So to show the input field for the lastName or password based on which "Edit" button they clicked.

I added the *ngIf and if the userAction is edit and the addEditProp is 'lastname'

<div class="col-sm-6" *ngIf="userAction === 'edit' && addEditProp === 'lastname'">
     <ar-account-editable-string [type]="'text'" [name]="'name'" [placeholder]="'Enter the name'" [text]="user?.username" (changed)="user.lastName = $event">
     </ar-account-editable-string>
</div>
<div class="col-sm-2 action-type">
    <div *ngIf="user.lastName">
        <a href (click)="enableAction('lastName', 'edit')">Edit</a>
    </div>
    <div *ngIf="!user.lastName">
        <a href (click)="enableAction('lastName', 'add')">Add</a>
    </div>
</div>

account.component.ts

protected addEditProp = '';
protected userAction = '';
protected enableAction(prop: String, userAction: String) {
    this.addEditProp = prop;
    this.userAction = userAction;
}
protected finishedAddEdit(result: String) {
    this.addEditProp = '';
    this.userAction = '';
}