时间戳

首页 > 解决方案 > 如何在同一个 .ts 文件中的两个组件之间传输数据

angular - 如何在同一个 .ts 文件中的两个组件之间传输数据

问题描述

我正在使用 Angular 7 并坚持使用一种方法，但是，我首先要问的是，我在同一个 .ts 文件中有两个类，如下所示：

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

@Component({
   selector: 'app-component',
   template: 'app.component.html',
   styleUrls: ['./app-component.css']
})
export class AppComponent{
   instruction:any;
   constructor() { }
}

@Component({
   selector: 'app-modal-component',
   template: 'app-modal.component.html'
})
export class AppModalComponent{
   constructor() { }
}

我想将数据从 传输AppComponent到AppModalComponent。他们有亲子关系还是兄弟姐妹关系？

我试过Input()&Output()方法。但他们似乎没有工作。最后的选择是使用Setter和Getter通过服务（我现在想避免。）。请协助处理此事。

标签： angularcomponents

解决方案

不知何故，我设法将数据传输parameters and services到模态组件，但是将这些类型的组件放在同一页面上并不是实现 Angular 的合适方法。因此，我将其分解AppModalComponent为一个单独的组件并将其导入到AppComponent

app.component.ts

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

@Component({
   selector: 'app-component',
   template: 'app.component.html',
   styleUrls: ['./app-component.css']
})
export class AppComponent{
   instruction:any;
   constructor() { }
}

app-modal.component.ts

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

@Component({
   selector: 'app-modal-component',
   template: 'app-modal.component.html'
})
export class AppModalComponent{
   constructor() { }
}

app.module.ts

import { AppModalComponent } from '../path-to-import-app-modal.component';

@NgModule({
  declarations: [
    ...,
    ...,
    AppModalComponent
  ],
  imports: [],
  exports:[],
  providers: []
})

export class AppModule { }

这是通过组件获取数据的最简单和必需的方法，它只会从这里变得容易。

推荐阅读