如何以角度將數據從子組件傳遞到子組件？

Question

deals-transaction.component由app-transactions-details呈現，且deals-transaction.component呈現app-deals-approval component.

如何獲取 Deals-transaction.component testPage() 結果或輸出並將數據傳遞給app-deals-approval組件並訪問 app-deals-approval 組件 ngOnit 上的值？

@Viewchild 是一個好的解決方案嗎？ 它應該作為輸入傳遞嗎？ . 謝謝。

謝謝 。

#deals-transaction.component html（這會呈現 app-deals-approval）我想將數據傳遞給 app-deals-approval

  <div>
    <app-deals-approval > </app-deals-approval>
  </div>

#deals-transaction.component.ts

@Component({
  selector: 'app-deals-transaction',
  templateUrl: './deals-transaction.component.html',
  styleUrls: ['./deals-transaction.component.css'],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class DealsTransactionComponent implements OnInit {
  @ViewChild(TableMultiSortComponent, { static: true }) tableMultiSortComponent: TableMultiSortComponent;
  transactionSubscripion: Subscription;
  tableOptions: any;
  @Input() transaction: any;
  isLoading: boolean;
  accountId: any;
  dealDetails: any;

  constructor(
    private _snackBar: MatSnackBar,
 
    private dealService: DealService,
 
  ) {}
  ngOnInit(): void {
    this.leaseId = this.transaction.leaseId;
    this.propertyId = this.transaction.propertyId;   
    const actions = ["Copy", "Delete", "For Approval"];
    this.testPage();
  }
  private testPage() {
    this.searchInput = '';
    const status = 'ForApproval'
    this.isLoading = true;
    this.dealService
      .getAllDeals(
        status,
        this.accountId,
        this.transaction.id,
        this.table.pageIndex + 1,
        this.table.pageSize,
        this.searchInput,
        this.table.sortParams,
        this.table.sortDirs
      )
      .pipe(finalize(() => (this.isLoading = false)))
      .subscribe((res) => {
        this.testPageOutput = res.items;
      }, (err) => this.notificationService.showError(err)
    );
  }

#deals-approval.component.ts 代碼

@Component({
  selector: 'app-deals-approval',
  templateUrl: './deals-approval.component.html',
  styleUrls: ['./deals-approval.component.css'],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class DealsApprovalComponent implements OnInit {
  transactionSubscripion: Subscription;
  @ViewChild(TableMultiSortComponent, { static: true }) tableMultiSortComponent: TableMultiSortComponent;
  tableOptions: any;
  hasApproval = false;
  @Input() transaction: any;
  @Input() dataTest: any;
  isLoading: boolean;
  DEAL_TYPES = DEAL.TYPES;
  totalDeals : number;

  dealType$: Observable<string> = new Observable<string>()
  firstSub: Subscription;
  accountId: any;
  data: any;
  searchInput: string;
  table: any;
  dealType: string;
  totalDealsForApproval = 0;
  constructor(
    private dealService: DealService,
    private notificationService: NotificationService,
    private trasactionService: TransactionService,
    private route: Router,
    private dealTransactionService: DealTransactionService
    
  ) { }

  ngOnInit(): void {
 
 }

Answer 1

內部deals-transaction.component

<app-deals-approval [testPageOutput]="testPageOutput"> </app-deals-approval>

在app-deals-approval component

// use set since your `testPage()` is generating result in async
_testPageOutput: any;
@Input() set testPageOutput(value: any) {
    this._testPageOutput = value;
    // other operation you want to perform upon `testPageOutput` value changes
}

Answer 2

這是因為testPageOutput由異步任務設置DealsTransactionComponent -這就是為什么它不在可用ngOnInit()的DealsApprovalComponent 。 嘗試訪問它在ngOnChanges()代替ngOnInit()的DealsApprovalComponent 。

@Component({
  selector: 'app-deals-transaction',
  templateUrl: './deals-transaction.component.html',
  styleUrls: ['./deals-transaction.component.css'],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class DealsTransactionComponent implements OnInit, OnChanges {
  testPageOutput: any;

  constructor(
      private _snackBar: MatSnackBar,
      private dealService: DealService) {}

  ngOnInit(): void {
    this.testPage();
  }

  private testPage() {
    this.dealService.getAllDeals(/*...*/)
      .pipe(finalize(() => (this.isLoading = false)))
      .subscribe(
         (res) => {
           this.testPageOutput = res.items;
         }, 
         (err) => this.notificationService.showError(err)
      );
  }
}

模板：

<div>
  <app-deals-approval [testPageOutput]="testPageOutput"> 
  </app-deals-approval>
</div>

交易批准組件

@Component({
  selector: 'app-deals-approval',
  templateUrl: './deals-approval.component.html',
  styleUrls: ['./deals-approval.component.css'],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class DealsApprovalComponent implements OnInit {

  @Input() testPageOutput: any;

  constructor() { 
  }

  ngOnInit(): void {
  }

  ngOnChanges(changes: any): void {
    if (changes.testPageOutput?.currentValue) {
      // do your stuff here
    }
  }
}