Question

我在同一文件中定义了两个组件，并试图将一个组件的一个变量访问另一个变量，并得到this 答案，但是当我尝试引用get SomeValue()函数时，该函数没有出现在另一个类中。

在提供的链接上给出答案：

export class Demo {
const sum = 10;

get SumValue() {
    return this.sum;
}
}

导入->演示

export class Demo2 {
   private sum: number;
   this.sum = Demo.SumValue();
}

我可以使用共享服务，但不想仅将其用于一个变量。

该答案是否缺少我的内容？

Answer 1

这叫做Component Interaction

您需要为此使用@Input。

如果您要发送子级的属性正在异步更改，那么您需要使用EventEmitter

检查this link以供参考

这是一个简单的示例：

子组件

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

@Component({
    selector: 'child-component',
    template: `<h2>Child Component</h2>
               current count is {{ count }}
    `
})
export class ChildComponent {
    @Input() count: number;
}

父项：

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

@Component({
  selector: 'app-root',
  template: `
        <h1>Welcome to {{title}}!</h1>
        <button (click)="increment()">Increment</button>
        <button (click)="decrement()">decrement</button>
        <child-component [count]=Counter></child-component>` ,
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Component Interaction';
  Counter = 5;

  increment() {
    this.Counter++;
  }
  decrement() {
    this.Counter--;
  }
}

Reference

在同一文件的另一个组件中使用一个组件的变量

1 个答案: