Question

我曾经搜索过但未能融入我的项目中 **问题：**我必须将一个包含数字的变量发送到component.ts中的component.ts。注意：我不想在HTML页面中使用该值。下面我给出了一个示例示例，我想要的数据!!

child.component.ts
===================
export class Child{

x:number;
<!-- may be some code to send the x value-->
<!-- Remember the value is in a method,which is onclick of a button-->

  onButtonClick(){

   x=5;

  }
}

parent.component.ts
====================
export class parent{

<!--some code goes here to get the x value-->

console.log("The value of x from Child: ",x);

}

现在和上面的代码一样，我想在组件中使用x的值，并在控制台中显示该值谢谢你的精彩创意。

Answer 1

使用Output & EventEmitter属性。

// parent.component.ts
// ==================== 

export class parent{
    updateValue(newValue: any){
        console.log("The value of x from Child: ", newValue);
    }
}

// parent.component.html
// ====================

<child (childValue)="updateValue($event)"></child>

// child.component.ts
// ===================

import { Output, EventEmitter } from '@angular/core';

export class Child{
    @Output() childValue: EventEmitter<any> = new EventEmitter();
    onButtonClick(){
        this.childValue.emit('value here');
    }
}

Answer 2

我建议您使用反应式编程方法解决此问题。您可以在下面的代码中看到实现。

以下是子组件作为服务（请记住，在使用之前需要提供服务）。

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
import { Observable } from 'rxjs/Observable';

@Injectable()
export class ChildService {
    public x$: Observable<string>;
    private x: BehaviorSubject<string>;

    constructor() {
        this.x = new BehaviorSubject<string>(null);
        this.x$ = this.x.asObservable();
    }
}

由于我们使用的是反应式编程，当 Child 服务中 x 的值发生变化时，我们将在 Parent 组件也是因为我们订阅了来更改值。

以下是 Parent 组件：

import { Component } from '@angular/core'; import { ChildService } from './child.service'; @Component({ selector: 'app-parent', templateUrl: './parent.component.html', styleUrls: ['./parent.component.css'] }) export class ParentComponent { x: string; constructor(childService: ChildService) { childService.x$.subscribe((value: string) => { this.x = value; }); } }

请记住，Child是一项服务（而不是组件），需要在@NgModule中提供</ em>

import { ChildService } from './child.service'; @NgModule({ // .... providers: [ ChildService ] // .... }) export class AppModule { }

Answer 3

所有这些答案都过于复杂。对于直接父母 - ＆gt;儿童或儿童 - ＆gt;父通信，您可以简单地使用依赖注入，这种技术通常用于在实例化组件时在构造函数中注入其他Angular类。

假设您有一些父组件

export class ParentComponent {

   someString: string;

   constructor( )  {} 

   someMethod() {
      return someVal : any;
   }

   private somePrivateMethod() {  return 'cant touch this'  }
}

在其任何子代中，您可以将该父组件的实例作为参数注入子组件构造函数中。你只需要像其他类一样导入它。

import { ParentComponent } from './wherever/parent/is/'

export class ChildComponent { 

   constructor(private parent:ParentComponent) { }

   ngOnInit() {
      let abc = this.parent.someMethod(); // works bc method is public
      let nope = this.parent.somePrivateMethod(); // will throw a compile error
    }
}

现在，子组件可以使用this.parent.whatever访问父组件的任何公共方法或属性。

要返回父级，您可以在父组件中创建一个存储ChildComponent实例的对象。所以类似地，将ChildComponent导入ParentComponent文件。

import { ChildComponent } from './wherever/child/is'

export class ParentComponent {

   someString: string;
   someNum: number;
   arrayOfChildren: ChildComponent[] = [];

   constructor( )  {} 

   someMethod() {
       return someVal : any;
   }

   addChild( child: ChildComponent ) {
      this.arrayOfChildren.push(child);
    } 
}

然后在父组件中添加一些方法，将其子组件的实例添加到数组中（可能更好地使用映射，但我现在保持简单）。

然后在孩子中，你只需在添加孩子的父母中调用该方法

export class ChildComponent { 
   constructor(private parent:ParentComponent) { }

   ngOnInit() {
        this.parent.addChild(this);
   }
}

现在您的孩子可以通过this.parent访问父母的公共属性，并且您的父母可以通过this.arrayOfChildren [0]访问其子女的公共属性。反应式编程很棒，但它非常适合在直接与层次结构无关的指令/组件之间进行通信时。当你有直接关系时，有很多简单的选择。

注意：我选择数组的唯一原因是bc通常父母有很多后代。没有理由你不能只创建一个名为

的属性

myChild: ChildComponent;

并将孩子直接存放到那里。

Answer 4

将我的例子用于您提供的代码......

import { Child } from './locationofchild'

@Component({selector: 'child' })
export class Parent{

   constructor()  { }

   child: Child;

    addChild(myChild: Child) {
       this.child = myChild;
    }

   someOtherMethod(){   
       console.log(this.child.x)  <--- will print 5, assuming 5 has been set by the click, otherwise it will print undefined
   }
}

}

================================

UINT32 ent = 0;
memcpy(&ent,ptr,32);

在Angular2中将一个数字值从一个组件发送到另一个组件

4 个答案: