从父组件访问子组件中的常量

Question

我有两个组件，我想在点击时从父组件打印子组件中的文本。

父组件：

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

@Component({
selector: 'parent',
templateUrl: 'parent.html'
})
export class ParentComponent implements OnInit {
   @ViewChild(ChildComponent) child;

   constructor() {
   }

   ngOnInit() {
   }

   click(){
       console.log(this.child.text);
   }
}

子组件：

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

@Component({
selector: 'child',
templateUrl: 'child.html'
})
export class ChildComponent implements OnInit {

   constructor() {
   }

   ngOnInit() {
       const text = 'TEXT HERE';
   }

   //Some code...
}

我是 Angular 的新手。只是想知道如何使它工作，我希望一些常量在一个点上并由其他人共享。常量不必仅在子组件中。只需要一个关于如何使其与良好的编码策略一起工作的好建议

这对我不起作用。

谢谢

Answer 1

我的解决方案是在这两个组件之间创建一个 sharedService

/// SharedService


export class SharedService {
   sharedConst: string = 'blabla';
}


//// ParentComponent


@Component({
    ...,
    providers: [SharedService]
})

export class ParentComponent {
    constructor(private sharedService: SharedService){}
}

//// ChildComponent

@Component({
    ...,
    template: `{{sharedService.sharedConst}}`
})

export class ChildComponent {


   constructor(public sharedService: SharedService){}
}

Answer 2

text是ngOnInit方法的局部变量。它只存在于该方法中，并在该方法存在时消失。您需要将其设为 ChildComponent 类的实例字段：

export class ChildComponent implements OnInit {
   text: string;

   ngOnInit() {
       this.text = 'TEXT HERE';
   }
}