Question

我在Angular2中遇到了一个问题。我想将唯一标识符传递给我的可重用组件。有人可以帮助我。

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>

在上面的html中，ar-toggleable-account-section处于非活动状态。当用户点击“编辑”或“添加”按钮时，它将变为活动状态。

account.component.ts

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

可切换-account.component.html

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

可切换-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');
  }

}

可编辑账户-string.component.html：

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

可编辑账户-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>();


}

问题：

最初'ar-toggleable-account-section'处于非活动状态/隐藏状态。当我点击“编辑”或“添加”按钮时，它会变为活动状态，但会在屏幕上显示多个“保存”“取消”，因为在“lastName”，“password”等多个位置使用相同的[inactive]。所以，当一个[inactive] =“inactive”变为false时，屏幕上将显示所有内容。我们如何将每个user.lastName，user.password，user.email等的唯一/动态[非活动]值传递给组件？

有人能为我解决这个问题吗？

Answer 1

您可以尝试这一点，将您添加/编辑的内容传递给启用功能，然后在组件中传递＆＃39;输入测试添加/编辑属性是否与您添加/编辑的内容相匹配

<强> account.component.ts

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

toggleable-account-component.ts （只是变量名称更改）

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

account.html （请注意<ar-toggleable-account-section>中的accountResult）

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

您必须确保在完成添加/编辑并向父组件发出保存或取消后，它看起来像finishedAddEdit(result: String)函数，您重置了addEditProp。

addEditProp = '';

[更新] （如果用户正在编辑lastName /密码等，则显示输入。）

所以要显示lastName或密码的输入字段，基于哪个＆＃34;编辑＆＃34;他们点击了按钮。

我添加了*ngIf，如果userAction是编辑而addEditProp是'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 = '';
}

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

1 个答案: