我有一个名为 modal 的组件。在这个模型 ts 文件中，我发出一个 http 请求以从 node js 获取 json 数据。检索后，我只是以表格格式显示它。我的表格结构如下所示。

modalId   modalName  subModal  AddSubmodal
111        modal1                add      
112        modal2                add

这里的问题是，单击添加按钮后，会出现一个弹出框（另一个组件）要求我们输入子模型名称。我们应该在那里显示我们必须输入子模型详细信息的模式名称。

因此，单击添加按钮后，我需要传递 modalId 来获取模型详细信息。因此，在这里我需要将 modalID 动态传递给 addmodel(second) 组件。有人能告诉我怎么做吗？

我的 modal.component.ts：

 @Component({
selector: 'app-modal',
templateUrl: './modal.component.html',
styleUrls: ['./modal.component.css']
})
 export class ModalComponent extends Lifecycle {
 public d: any;
 constructor(
    private $modal: $ModalManagerService,
    private http: HttpClient,
) {
    super();
}
 _initialize(): void {          
   this.http.get('/getModel',{responseType:"json"}).subscribe(
   response => {
       this.data = response;
        var sample=JSON.stringify(response);
      });
    }
addSubmodal(modalId){
 let obj = this.$modal.show(AddSubModalComponent)
        .subscribe(r => {
            obj.unsubscribe();
        });

};

我的模态html：

 <table class="table table-bordered" >
    <thead>
      <tr>
        <th>modal ID</th>
        <th>modal Name</th>
        <th>SubModal</th>
        <th>AddSubmodal</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let i of d">
        <td>{{ i.Record.modalId }}</td>
        <td>{{ i.Record.modalName }}</td>
        <td></td>
        <td>
          <img src="./../Add_Icon.svg" (click)="addSubmodal(i.Record.modalId);">
        </td>
      </tr>
    </tbody>
  </table>

由于我是 Angular 新手，我只是在 stackoverflow 中浏览 Angular 答案并执行此操作。请告诉我如何在我的第二个组件 html 文件中实现这一点？

解决方案

使用输入和输出装饰器

基本概念---> DEMO

应用程序.组件.html：

<app-component1 (elm)="catch1Data($event)">

</app-component1>
<app-component2 [elm]="datatocomp2" *ngIf="datatocomp2"></app-component2>

parent component : {{datatocomp2 | json}}

应用程序.组件.ts：

 datatocomp2: any;

  catch1Data(data) {
    console.log(data)
    this.datatocomp2 = data;
  }

组件1.ts：

@Output () elm : EventEmitter<any> = new EventEmitter<any>();



objectData: any;

  constructor() { }



 ngOnInit() {
    let objectData = {
      comp: 'component 1',
      data: 'anything'
    }

this.objectData = objectData;
this.elm.emit(objectData)
  }

组件2.ts：

@Input() elm: any;

  constructor() { }

  ngOnInit() {
    console.log(this.elm);
  }