时间戳

首页 > 解决方案 > 在同一文件中的另一个组件中使用一个组件的变量

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

问题描述

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

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

export class Demo {
const sum = 10;

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

导入-->演示

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

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

我从那个答案中遗漏了什么？

标签： angulardragulang2-dragulaangular-dragula

解决方案

这就是所谓的Component Interaction

您需要为此使用@Input。

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

检查此链接以供参考

这是一个简单的例子：

子组件

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--;
  }
}

参考

推荐阅读