Angular 6將數據從父級傳遞到子級Bootstrap模式

Question

作為angular 6的新手，我在將數據從一個組件傳遞到另一組件時遇到了問題。

實際上，我正在從父模態中打開子組件引導程序模態，並且想要將字符串參數傳遞給子模態組件，並且還希望在模態打開並且函數返回僅在表中顯示的數組時立即調用函數。

父組件HTML

<div class="parent-comp">
    <div id="ext-modal" class="modal fade" role="dialog">
          <!-- Modal content Starts-->
          <app-f-ext [Id]="Id"></app-f-ext>
          <!-- Modal content Ends-->
        </div>
</div>

子組件TS

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

@Component({
  selector: 'app-premium-extension',
  templateUrl: './premium-extension.component.html',
  styleUrls: ['./premium-extension.component.css']
})
export class ExtensionComponent implements OnInit {
  @Input() Id: string;

  constructor() {

  }

  ngOnInit() {
  }

  callThisFunctionOnOpeningModal(){
   console.log(Id)
  }

}

子組件HTML

<div class="modal-dialog modal-lg">
  <div class="modal-content">
    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal">&times;</button>
      <h4 class="modal-title">Ext {{Id}}</h4>
    </div>
    <div class="modal-body">

    </div>
  </div>
</div>

父組件TS

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'ap-detail',
  templateUrl: './p-details.component.html',
  styleUrls: ['./p-details.component.css']
})
export class PDetailsComponent implements OnInit {
  Id: string;

  constructor(){
    this.Id = "test";
  }
}

當我打開模態時，它顯示在模態標題中，但是如何在模態負載上調用函數並在該函數中傳遞ID。

請不要在問題上打上勾號，因為我對此確實有很大的疑問。 先謝謝您的幫助。

Answer 1

您必須使用正確的選擇器來調用您的子組件。 因此，請替換：

<!-- Modal content Starts-->
    <app-f-ext [Id]="Id"></app-f-ext>
<!-- Modal content Ends-->

通過：

<!-- Modal content Starts-->
    <app-premium-extension [Id]="Id"></app-premium-extension>
<!-- Modal content Ends-->

並確保在parent.component.ts文件中聲明並初始化Id var

然后，您可以在ngOnInit函數中訪問Id屬性：

ngOnInit() {
   console.log(Id);
}