在 Angular 2 中将数据从父视图传递到子视图

Question

我有一个视图，其中包含一个垫子 table，父视图中有用户数据，用于在 table 中选择一个条目我希望能够打开一个包含所选行的新视图数据预填充。

<mat-table [dataSource]="registeredUsersDataSource" matSort>

        <!-- First Name Column -->
        <ng-container matColumnDef="firstName">
          <mat-header-cell class="columnHeadingText" *matHeaderCellDef mat-sort-header> First Name
          </mat-header-cell>
          <mat-cell class="columnCellText" *matCellDef="let row"> {{row.firstName}} </mat-cell>
        </ng-container>

        <!-- Last Name Column -->
        <ng-container matColumnDef="lastName">
          <mat-header-cell class="columnHeadingText" *matHeaderCellDef mat-sort-header> Last Name </mat-header-cell>
          <mat-cell class="columnCellText" *matCellDef="let row"> {{row.lastName}} </mat-cell>
        </ng-container>

        <!-- E-mail Column -->
        <ng-container matColumnDef="emailId">
          <mat-header-cell class="columnHeadingText" *matHeaderCellDef mat-sort-header> E-mail </mat-header-cell>
          <mat-cell class="columnCellText" *matCellDef="let row"> {{row.emailId}} </mat-cell>
        </ng-container>

        <!-- Country Column -->
        <ng-container matColumnDef="country">
          <mat-header-cell class="columnHeadingText interCellPadding" *matHeaderCellDef mat-sort-header> Country
          </mat-header-cell>
          <mat-cell class="columnCellText interCellPadding" *matCellDef="let row"> {{row.country |
            codeToCountryConversion}} </mat-cell>
        </ng-container>

        <!-- Role Column -->
        <ng-container matColumnDef="role">
          <mat-header-cell class="columnHeadingText" *matHeaderCellDef mat-sort-header> Roles </mat-header-cell>
          <mat-cell class="columnCellText" *matCellDef="let row">
            <label *ngIf='row.rolesAccess[0]' class="columnCellText ">{{row.rolesAccess[0].role ===
              'API_ApplicationDeveloper' ? 'Developer' : row.rolesAccess[0].role }}</label> <br>
            <label *ngIf='row.rolesAccess[1]' class="columnCellText ">{{row.rolesAccess[1].role ===
              'API_ApplicationDeveloper' ? 'Developer' : row.rolesAccess[1].role }}</label> <br>
            <label *ngIf='row.rolesAccess[2]' class="columnCellText ">{{row.rolesAccess[2].role ===
              'API_ApplicationDeveloper' ? 'Developer' : row.rolesAccess[2].role }}</label>
          </mat-cell>

          <!-- <label *ngIf='{{row.rolesAccess[1].role}}' class="columnCellText ">{{row.rolesAccess[1].role}}</label>
              <label *ngIf='{{row.rolesAccess[2].role}}'class="columnCellText ">{{row.rolesAccess[2].role}}</label> </mat-cell>    -->
        </ng-container>

        <!-- Action Buttons Column -->
        <ng-container matColumnDef="actions">
          <mat-header-cell class="columnHeadingText" *matHeaderCellDef> Actions </mat-header-cell>
          <mat-cell class="columnCellText" *matCellDef="let row">

            <!-- Edit User -->
            <button title="Edit User" appDtsButton class="btnNoBorder" (click)="onClickRegisteredUsersEdit(row)">
              <sap-icon [iconName]="'sap-icon://edit'"></sap-icon>

              <!-- Used to pass row data into to view -->
              <app-edituser hidden="true" [value]='sujith'>
              </app-edituser>

            </button>

            <!-- Revoke User -->
            <button title="Revoke User" appDtsButton class="btnNoBorder" (click)="onClickRegisteredUsersRevoke(row)">
              <sap-icon [iconName]="'sap-icon://cancel'"></sap-icon>
            </button>
          </mat-cell>
        </ng-container>

        <mat-header-row *matHeaderRowDef="registeredUsersDisplayedColumns"></mat-header-row>
        <mat-row *matRowDef="let row; columns: registeredUsersDisplayedColumns;">
        </mat-row>
      </mat-table>

这是我在子视图中接收数据并打印它的代码。

export class EdituserComponent implements OnInit {
@Input() value: string;

ngOnInit() {
console.log(this.value);

}

当我尝试将其打印出来时，我得到了未定义的信息。

理想情况下，我希望能够将包含用户所有详细信息的对象传递到第二个视图。

Answer 1

如果您使用 [] 语法，它将尝试解析该值。在这个例子中：

[value]='sujith'

正在寻找一个名为 sujith 的变量。

相反，您可以这样做

[value]='"sujith"'

或

value='sujith'

Answer 2

这里有两个问题-

Passing the @Input value

 <app-edituser hidden="true" [value]="'sujith'">

The place where are you accessing the input value.

您不必在 ngOnInit 方法中使用 @Input 值。视图准备就绪后，您应该查找@Input。所以你可以在ngAfterViewInit函数

中得到它

ngAfterViewInit() {
   console.log(this.value);
}

在 Angular 2 中将数据从父视图传递到子视图

Passing Data from parent view to child view in Angular 2

data-manipulation

angular2-routing

angular