Question

成为角度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-->

并确保在Id文件中声明并初始化parent.component.ts变量

然后您可以在Id函数中访问ngOnInit属性：

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

Angular 6将数据从父级传递到子级Bootstrap模式

1 个答案: