如何简单地将属性值从一个组件的TS文件传递到另一组件

时间:2019-01-19 09:46:43

标签: typescript angular6

one.component.ts

all_reflections = ApplicationRecord.descendants.map(&:reflections)

two.component.html

rightmenuDetails=[
  {
    text: valueicon: img
  },
  {
    text: valueicon: img
  }
]

这有可能简单吗?

1 个答案:

答案 0 :(得分:0)

最简单的方法是以相当快的'n肮脏的方式使用服务。

构建包含字符串变量的服务。

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

@Injectable()
export class SimpleService {
   public text: string = '';

   constructor() { }
}

您必须将服务导入模块并提供。

import { ComponentA } from './component-a.ts';
import { ComponentB } from './component-b.ts';
import { SimpleService } from './simple.service.ts';

@NgModule({
  declarations: [
    ComponentA,
    ComponentB
  ],
  imports: [
    ComponentA,
    ComponentB
  ],
  providers: [
      SimpleService
  ]

})
export class XYZModule { }

然后一个组件设置该值,另一个组件读取它。

ComponentA

import { SimpleService } from './simple.service.ts';

constructor(private simpleService: SimpleService) { }

setText(text: string): {
    this.simpleService.text = text;
}

ComponentB

TS文件

import { SimpleService } from './simple.service.ts';

constructor(private simpleService: SimpleService) { }

HTML文件

<p>{{simpleService.text}}</p>

就是这样。